1.0.1 • Published 7 years ago
vue-progress-bar v1.0.1
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.