Using Progressbar.js as a Vue Component


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.



yarn add vue-progress

Import as a vue plugin

import VueProgress from 'vue-progress'

Use it directly to your template binding to props:

    type="circle" ref="line" color="#296690" 
    strokeWidth="0.2" duration="2000"


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


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


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.