Vuejs-Vue progressbar: vue-progressbar - A lightweight progress bar for vue.

vue-progressbar

Table of Contents

Demo

Demo

Requirements

Installation

# npm
$ npm install vue-progressbar

#yarn
$ yarn add vue-progressbar

Usage

main.js

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

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

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

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% true true, false

Implementation

App.vue

<template>
    <div id="app">
        <!-- for example router view -->
        <router-view></router-view>
        <!-- set progressbar -->
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<script>
export default {
  mounted () {
    //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish()
  },
  created () {
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start()
    //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
      //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        // parse meta tags
        this.$Progress.parseMeta(meta)
      }
      //  start the progress bar
      this.$Progress.start()
      //  continue to next page
      next()
    })
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the progress bar
      this.$Progress.finish()
    })
  }
}
</script>

vue-router

export default [
  {
    path: '/achievement',
    name: 'achievement',
    component: './components/Achievement.vue',
    meta: {
      progress: {
        func: [
          {call: 'color', modifier: 'temp', argument: '#ffb000'},
          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
          {call: 'location', modifier: 'temp', argument: 'top'},
          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
        ]
      }
    }
  }
]

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)

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

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

main.js

// main.js from Usage section

Vue.use(VueProgressBar, options)

export default new Vue({ // export the Vue instance
  ...App
}).$mount('#app')

api-axios.js

import axios from 'axios';
import app from '../main'; // import the instance

const instance = axios.create({
    baseURL: '/api'
});

instance.interceptors.request.use(config => {
    app.$Progress.start(); // for every request start the progress
    return config;
});

instance.interceptors.response.use(response => {
    app.$Progress.finish(); // finish when a response is received
    return response;
});

export default instance; // export axios instance to be imported in your app

License

The MIT License

Comments

  • Using progress bar with axios interceptors is causing hanging isssues
    Using progress bar with axios interceptors is causing hanging isssues

    Jun 17, 2019

    Description: I have implemented some axios interceptors to refresh the auth token. After the implementation, the progress bar sometimes keeps loading and prevents navigation. The issue was resolved after commenting out the progress bar.

    Steps to reproduce

    1. Implement some lengthy axios interceptors (something that depends on a promise or something similar)
    2. Add the progress bar to your default view
    3. Perform some navigations while triggering the interceptor
    Reply
  • Loading finish first before page loaded
    Loading finish first before page loaded

    Oct 23, 2019

    I'm using this in App.vue, but when i load heavy page on slow connection then this loading will finish first before my page. How to solve this?

    Reply
  • Added docs for Vuex usage
    Added docs for Vuex usage

    Oct 23, 2019

    I recognize the much better pattern of relying on Axios interceptors, but for those who want to use directly through Vuex should use this.

    Reply
  • Stack size exceeded
    Stack size exceeded

    Nov 4, 2019

    When hitting the route multiple times it keeps registering. Eventually reaching maximum stack size.

    Any one else had this problem ?

    <script>
    export default {
      mounted () {
        //  [App.vue specific] When App.vue is finish loading finish the progress bar
        this.$Progress.finish()
      },
      created () {
        //  [App.vue specific] When App.vue is first loaded start the progress bar
        this.$Progress.start()
        //  hook the progress bar to start before we move router-view
        this.$router.beforeEach((to, from, next) => {
          //  does the page we want to go to have a meta.progress object
          if (to.meta.progress !== undefined) {
            let meta = to.meta.progress
            // parse meta tags
            this.$Progress.parseMeta(meta)
          }
          //  start the progress bar
          this.$Progress.start()
          //  continue to next page
          next()
        })
        //  hook the progress bar to finish after we've finished moving router-view
        this.$router.afterEach((to, from) => {
          //  finish the progress bar
          this.$Progress.finish()
        })
      }
    }
    </script>
    
    Reply
  • feat: add gradient support.
    feat: add gradient support.

    May 4, 2020

                                                                                                                                                                                                           
    Reply
  • How to use/configure this package, on single index.html page without npm?
    How to use/configure this package, on single index.html page without npm?

    May 21, 2020

    Following is my code, just want to configure vue-progressbar on this single page directly without NPM.

    Problem: Unable to configure progress bar component.

    Body:

    <div id="app">
         <ul>
              <li v-for="goal in goals">{{ goal.title }}</li>
         </ul>
         <vue-progress-bar></vue-progress-bar>
    </div>
    

    Js:

            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-progressbar.min.js"></script>
    	<script type="text/javascript">
    	new Vue({
    	    el: '#app',
    	    components: {
    	        vue-progress-bar: window['vue-progressbar']
    	    },
    	    data: {
    	    	goals: {},
    	    	page: 1
    	    },
    	    mounted() {
    			this.getGoals();
    		},
    	    methods: {
    			getGoals(page = 1) {
    				this.$Progress.start();
    			    axios.get('/api/goals?page=' + page)
    			        .then(response => {
    			            this.goals.page = page;
    			            this.goals.list = response.data;
    			            this.$Progress.finish();
    			        });
    			},
    	    }
    	});
    	</script>
    
    Reply
  • Will vue3 support be added?
    Will vue3 support be added?

    Oct 22, 2020

                                                                                                                                                                                                           
    Reply
  • is vue-progressbar package working for vue 3.0?
    is vue-progressbar package working for vue 3.0?

    Nov 9, 2020

                                                                                                                                                                                                           
    Reply
  • Support  linear gradient
    Support linear gradient

    Apr 15, 2021

    Please support CSS Linear Gradients, Thank you very much :)

    Reply
  • Method to get current status of progress bar | Feature request
    Method to get current status of progress bar | Feature request

    Jun 15, 2021

    I want to get the status of the progress bar at the any moment in any where of my code, where one is in progress or finished.

    this.$progress.start();

    // some code // some more code let status = this.$progress.status(); // Required {status: 'open', progress: 20%}

    if(status){ // do something }

    this.$progress.finish(); // End

    Reply
  • Added autoFinish option
    Added autoFinish option

    Feb 24, 2018

    This options allow the progress bar not to finish automatically when it is close to 100%. It's enabled by default in order to keep the current behaviour. When disabled, the progress bar will only go up to 99% on its own.

    Reply
  • Does not support IE11 as well as part of the Android mobile phone
    Does not support IE11 as well as part of the Android mobile phone

    Jan 17, 2017

    The report does not support ‘assign’ features

    Reply
  • The progressbar animation doesn't stop.
    The progressbar animation doesn't stop.

    Jun 6, 2017

    After using the method this.$Progressbar.finish(), the animation doesn't stop and it's my problem when I use your library.

    You can see the image for more details: http://d.pr/i/qivNC.

    Thank you for working on porting the progressbar to use with Vue.

    Reply
  • Uglify Error
    Uglify Error

    Nov 2, 2016

    File vue-progressbar.es5.js

    2016-11-02 3 07 35

    This is ES6 feature,make Uglify SyntaxError

    Reply
  • support vue.js 2.0
    support vue.js 2.0

    Oct 4, 2016

    any plan to support vue.js 2.0?

    enhancement 
    Reply
  •  Error when evaluating expression
    Error when evaluating expression

    Sep 24, 2016

    i follow the documentation but i have this error:

    vue.common.js?e881:1019[Vue warn]: Error when evaluating expression "{ 'width': progress.percent+'%', 'height': progress.options.height, 'background-color': progress.options.canSuccess? progress.options.color : progress.options.failedColor, 'opacity': progress.options.show ? 1 : 0 }": TypeError: Cannot read property 'percent' of undefined (found in component: )

    Reply
  • 如果请求时间过长会自动结束?
    如果请求时间过长会自动结束?

    Apr 21, 2017

    您好, 我在使用 ajax 开始时 Vue.$Progress.start() 当请求时间比较长时,发现进度条走个七、八秒就自动结束了,而此时 ajax 请求还在 pending 状态。 请问这种情况是正常的吗? 谢谢

    Reply
  • Feature Request: Pause Progress
    Feature Request: Pause Progress

    Oct 21, 2016

    Hi, I have some use-cases for when a task takes quite a bit of time and the progress bar gets to the end before the task is actually complete and before I have asked it to $Progress.finish(). Could we possibly pause it at say a certain percentage for such cases and then finish it upon completion of task?

    Reply
  • Error <style scoped> ^
    Error