Using Progressbar.js as a Vue Component

vue-progress

Projects can require a lot for elements and in Vue projects, there are many plugins to use directly to fulfill a specific need. Vue components which serve a certain purpose are fairly easy to use and one of them is the vue-progress which serve to use Progressbar.js as a Vue Component. Look how progress bars can look in the demo page.

Take a look at the example below to see how to install and use.

Example

Install

yarn add vue-progress

Import as a vue plugin

import VueProgress from 'vue-progress'
Vue.use(VueProgress)

Use it directly to your template binding to props:

<progress-bar 
    type="circle" ref="line" color="#296690" 
    strokeWidth="0.2" duration="2000"
    >
    </progress-bar>

or

<progress-bar type="line" ref="percentLine" :options="options"></progress-bar>

...

options: {
    color: '#E91E63',
    strokeWidth: 0.9,
}

Result:

To see more ProgressBar component attributes and vm methods head to the GitHub repo where you can also find out how to build custom progress bars.