vue-progressbar-xeonpowder v0.8.1

vue-progressbar

Table of Contents

• Demo
• Requirements
• Installation
• Usage
  • Constructor Options
  • Implementation
  • vue-router
    • meta/modify options
• Methods
• Examples
  • vue-resource example
• License

Demo

• Demo (updated)
• Demo (forked from)
• Trailing progress bar + randomizer
• Vue-router meta progress bar
• Multi progress bar support
• Gradient support

Requirements

• Vue.js 1.x or 2.x

Installation

# npm
$ npm install vue-progressbar-xeonpowder

# yarn
$ yarn add vue-progressbar-xeonpowder

Build from source

# git
cd /directory/to/clone/to
git clone https://github.com/XeonPowder/vue-progressbar.git

cd /directory/cloned/to

# npm or yarn
npm install | yarn install

# build with npm or yarn
[npm|yarn] run build

Usage

main.js

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'

const options = {
  debug: true,
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    time: '0.7s',
    opacity: '1.6s'
  },
  trail: '-1px',
  autoRevert: true,
  location: 'top',
  inverse: false,
  gradient: {
    use: true,
    gradient: 'predefined'
  },
  init: true,
  bounce: true
}

Vue.use(VueProgressBar, options)

new Vue({
  ...App
}).$mount('#app')

Constructor Options

Implementation

App.vue

<template>
    <div id="app">
        <!-- for example router view -->
        <router-view></router-view>
        <!-- setup progressbar -->
        <!-- automatically added to $pb -->
        <!-- required: show - should the progress bar be able to be displayed -->
        <!-- required: reference - name of this specific progress bar -->
        <!-- optional: options - can be passed custom constructor options -->
        <vue-progress-bar :options="options" :show="true" reference="router"></vue-progress-bar>
    </div>
</template>

<script>
export default {
  mounted () {
    //  [App.vue specific] Start the bar and finish it on first load
    this.$pb.start('router')
    let this2 = this
    setTimeout(() => {
      this2.$pb.finish('router')
    }, 400) // 400 is a good number, anything less and the bars will not work nicely.
  },
  created () {
    //  using vue-router before each page change
    this.$router.beforeEach((to, from, next) => {
      this.startReroute(to, from, next)
    })
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the `router` progress bar
      let this2 = this
      setTimeout(() => {
        this2.$pb.finish('router')
      }, 400) // 400 is a good number, anything less and the bars will not work nicely.
    })
  }
  methods: {
    startReroute (to, from, next) {
      //  vue-router meta style
      this.$pb.start('router', to.meta.progress, 'meta')
      //
      //  randomize style
      let random = {
        color: { r: {min: 0, max: 255}, g: {min: 0, max: 255}, b: {min: 0, max: 255} },
        fail: { r: {min: 250, max: 255}, g: {min: 0, max: 0}, b: {min: 100, max: 150} },
        thickness: { min: 10, max: 20, suffix: 'px' },
        trail: { min: 20, max: 50, suffix: 'px' },
        transition: {
          time: { min: 0.5, max: 1.75 },
          opacity: { min: 0.7, max: 1.4 }
        },
        location: ['top', 'bottom', 'left'],
        inverse: [true, false],
        bounce: [true, false],
        gradient: { 
          use: [true, false],
          gradient: {
            from: { r: {min: 0, max: 255}, g: {min: 0, max: 255}, b: {min: 0, max: 255} },
            to: { r: {min: 0, max: 255}, g: {min: 0, max: 255}, b: {min: 0, max: 255} }
          }
        }
      }
      this.$pb.start('router', random, 'randomize')
      //// or
      this.$pb.randomize('router', random)
      this.$pb.start('router')
      //// or
      this.$pb.start('router', {trail: {min: -1, max: -1}}, 'randomize')      
      //
      //  modify style
      this.$pb.modify('router', {call: 'inverse', modifier: 'set', argument: true})
      this.$pb.start('router')
      //// or 
      this.$pb.modify('router', [{call: 'inverse', modifier: 'set', argument: true}, {call...}])
      this.$pb.start('router')
      //
      // continue to next page
      next()
    }
  }
}
</script>

vue-router

export default [
  {
    path: '/achievement',
    name: 'achievement',
    component: './components/Achievement.vue'
    meta: {
      progress: {
        func: [
          {call: 'color', modifier: 'temp', argument: '#7000ff'},
          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
          {call: 'location', modifier: 'temp', argument: 'top'},
          {call: 'transition', modifier: 'temp', argument: {time: '2.0s', opacity: '0.6s'}},
          {call: 'inverse', modifier: 'temp', argument: true},
          {call: 'thickness', modifier: 'temp', argument: '10px'},
          {call: 'trail', modifier: 'temp', argument: '50px'},
          {call: 'bounce', modifier: 'temp', argument: false },
          {call: 'gradient', modifier: 'temp', argument: {use: true, gradient: 'predefined'}}
        ]
      }
    }
  }
]

vue-router meta/modify options

Methods

Examples

vue-resource

<template>
  <div>
    <vue-progress-bar reference="loading"></vue-progress-bar>
  </div>
</template>

<script>
export default {
  methods: {
    test () {
      this.$pb.start('loading')
      this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')
      .then((response) => {
        this.$pb.finish('loading')
      }, (response) => {
        this.$pb.fail('loading')
      })
    }
  }
}
</script>

License

This project uses an open-source MIT License