vue-progressbar

Table of Contents

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

Demo

Demo

Requirements

• Vue.js 1.x or 2.x

Installation

1# npm
2$ npm install vue-progressbar
3
4#yarn
5$ yarn add vue-progressbar

Usage

main.js

1import Vue from 'vue'
2import VueProgressBar from 'vue-progressbar'
3import App from './App'
4
5const options = {
6  color: '#bffaf3',
7  failedColor: '#874b4b',
8  thickness: '5px',
9  transition: {
10    speed: '0.2s',
11    opacity: '0.6s',
12    termination: 300
13  },
14  autoRevert: true,
15  location: 'left',
16  inverse: false
17}
18
19Vue.use(VueProgressBar, options)
20
21new Vue({
22  ...App
23}).$mount('#app')
24
25

Constructor Options

key	description	default	options
color	color of the progress bar	'rgb(143, 255, 199)'	RGB HEX HSL HSV VEC
failedColor	color of the progress bar upon load fail	'red'	RGB, HEX, HSL, HSV, VEC
thickness	thickness of the progress bar	'2px'	px, em, pt, %, vh, vw
transition	transition speed/opacity/termination of the progress bar	{speed: '0.2s', opacity: '0.6s', termination: 300}	speed, opacity, termination
autoRevert	will temporary color changes automatically revert upon completion or fail	true	true, false
location	change the location of the progress bar	top	left, right, top, bottom
position	change the position of the progress bar	fixed	relative, absolute, fixed
inverse	inverse the direction of the progress bar	false	true, false
autoFinish	allow the progress bar to finish automatically when it is close to 100%	false	true, true

Implementation

App.vue

1<template>
2    <div id="app">
3        <!-- for example router view -->
4        <router-view></router-view>
5        <!-- set progressbar -->
6        <vue-progress-bar></vue-progress-bar>
7    </div>
8</template>
9
10<script>
11export default {
12  mounted () {
13    //  [App.vue specific] When App.vue is finish loading finish the progress bar
14    this.$Progress.finish()
15  },
16  created () {
17    //  [App.vue specific] When App.vue is first loaded start the progress bar
18    this.$Progress.start()
19    //  hook the progress bar to start before we move router-view
20    this.$router.beforeEach((to, from, next) => {
21      //  does the page we want to go to have a meta.progress object
22      if (to.meta.progress !== undefined) {
23        let meta = to.meta.progress
24        // parse meta tags
25        this.$Progress.parseMeta(meta)
26      }
27      //  start the progress bar
28      this.$Progress.start()
29      //  continue to next page
30      next()
31    })
32    //  hook the progress bar to finish after we've finished moving router-view
33    this.$router.afterEach((to, from) => {
34      //  finish the progress bar
35      this.$Progress.finish()
36    })
37  }
38}
39</script>

vue-router

1export default [
2  {
3    path: '/achievement',
4    name: 'achievement',
5    component: './components/Achievement.vue'
6    meta: {
7      progress: {
8        func: [
9          {call: 'color', modifier: 'temp', argument: '#ffb000'},
10          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
11          {call: 'location', modifier: 'temp', argument: 'top'},
12          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
13        ]
14      }
15    }
16  }
17]

vue-router meta options

call	modifier	argument	example
color	set, temp	string	{call: 'color', modifier: 'temp', argument: '#ffb000'}
fail	set, temp	string	{call: 'fail', modifier: 'temp', argument: '#ffb000'}
location	set, temp	string	{call: 'location', modifier: 'temp', argument: 'top'}
transition	set, temp	object	{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}

Methods

function	description	parameters	example
start	start the progress bar loading	N/A	this.$Progress.start()
finish	finish the progress bar loading	N/A	this.$Progress.finish()
fail	cause the progress bar to end and fail	N/A	this.$Progress.fail()
increase	increase the progress bar by a certain %	number: integer	this.$Progress.increase(number)
decrease	decrease the progress bar by a certain %	number: integer	this.$Progress.decrease(number)
set	set the progress bar %	number: integer	this.$Progress.set(number)
setFailColor	cause the fail color to permanently change	color: string	this.$Progress.setFailColor(color)
setColor	cause the progress color to permanently change	color: string	this.$Progress.setColor(color)
setLocation	cause the progress bar location to permanently change	location: string	this.$Progress.setLocation(location)
setTransition	cause the progress bar transition speed/opacity/termination to permanently change	transition: object	this.$Progress.setTransition(transition)
tempFailColor	cause the fail color to change (temporarily)	color: string	this.$Progress.tempFailColor(color)
tempColor	cause the progress color to change (temporarily)	color: string	this.$Progress.tempColor(color)
tempLocation	cause the progress bar location to change (temporarily)	location: string	this.$Progress.tempLocation(location)
tempTransition	cause the progress bar location to change (temporarily)	transition: object	this.$Progress.tempTransition(transition)
revertColor	cause the temporarily set progress color to revert back to it's previous color	N/A	this.$Progress.revertColor()
revertFailColor	cause the temporarily set fail color to revert back to it's previous color	N/A	this.$Progress.revertFailColor()
revertTransition	cause the temporarily set transition to revert back to it's previous state	N/A	this.$Progress.revertTransition()
revert	cause the temporarily set progress and/or fail color to their previous colors	N/A	this.$Progress.revert()
parseMeta	parses progress meta data	meta: object	this.$Progress.parseMeta(meta)

Examples

Loading Data (vue-resource)

1
2<script>
3export default {
4  methods: {
5    test () {
6      this.$Progress.start()
7      this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')
8      .then((response) => {
9          this.$Progress.finish()
10      }, (response) => {
11          this.$Progress.fail()
12      })
13    }
14  }
15}
16</script>
17

---

Accessing the progress bar externally through the vue instance (e.g. axios interceptors)

main.js

1// main.js from Usage section
2
3Vue.use(VueProgressBar, options)
4
5export default new Vue({ // export the Vue instance
6  ...App
7}).$mount('#app')

api-axios.js

1import axios from 'axios';
2import app from '../main'; // import the instance
3
4const instance = axios.create({
5    baseURL: '/api'
6});
7
8instance.interceptors.request.use(config => {
9    app.$Progress.start(); // for every request start the progress
10    return config;
11});
12
13instance.interceptors.response.use(response => {
14    app.$Progress.finish(); // finish when a response is received
15    return response;
16});
17
18export default instance; // export axios instace to be imported in your app

License

The MIT License