Naivete Precedes Misrepresentation

    vue-progress-bar

    1.0.1 • Public • Published

    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.

    Install

    npm i vue-progress-bar

    DownloadsWeekly Downloads

    37

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • amostajo