1.0.1 • Published 7 years ago

vue-progress-bar v1.0.1

Weekly downloads
144
License
MIT
Repository
github
Last release
7 years ago

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

PropertyDefaultDescription
css-classCSS class to be appended to component default progress-bar.
height20Progress bar height in pixels.
background-color#FFFBackground color of the component.
border-color#CCCBorder color of the component.
color#81D4FAColor of the progress bar.
completed-color#8BC34AColor of the progress bar once completed.

License

MIT License 2017 (c) 10 Quality.