Progress Bar (Vue Component)

Progress Bar component for Vue JS v2.

Install

Download dependency using npm:

npm install vue-progress-bar

Then, to use the component in regular HTML:

<script src="[path-to-package]/dist/vue.progress-bar.min.js"></script>

Or with NodeJS:

// As global component
Vue.component('progress-bar', require('./parts/vue.progress-bar'));

// As regular element component
var appSample = new Vue({
    el:'#my-app',
    components: {
        'progress-bar': require('./parts/vue.progress-bar'),
    } 
});

Usage

Simple add the markup in your template as follows. Use v-model to bind the progress value to the component.

<progress-bar v-model="progressValue"></progress-bar>

Note: Progress value can be either decimal or float percentage value; it is recommended to use float percentage like 0.5 to indicate 50%.

Properties

| Property | Default | Description | | ------------------ | ------- | ------------------------------------------------------------- | | css-class | | CSS class to be appended to component default progress-bar. | | height | 20 | Progress bar height in pixels. | | background-color | #FFF | Background color of the component. | | border-color | #CCC | Border color of the component. | | color | #81D4FA | Color of the progress bar. | | completed-color | #8BC34A | Color of the progress bar once completed. |

License

MIT License 2017 (c) 10 Quality.