https://github.com/10quality/vue-progress-bar

Vue progress bar component.
https://github.com/10quality/vue-progress-bar

Last synced: 5 days ago
JSON representation

Vue progress bar component.

• Host: GitHub
• URL: https://github.com/10quality/vue-progress-bar
• Owner: 10quality
• License: mit
• Created: 2017-07-20T17:14:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-03T01:30:33.000Z (over 6 years ago)
• Last Synced: 2024-10-05T15:07:08.174Z (about 1 month ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Progress Bar (Vue Component)

Progress Bar component for [Vue JS](https://vuejs.org/) v2.

## Install

Download dependency using npm:

```bash

npm install vue-progress-bar

```

Then, to use the component in regular HTML:

```html

```

Or with NodeJS:

```javascript

// As global component

Vue.component('progress-bar', require('vue-progress-bar'));

// As regular element component

var appSample = new Vue({

    el:'#my-app',

    components: {

        'progress-bar': require('vue-progress-bar'),

    } 

});

```

## Usage

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

```html

```

**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                                                   |

| ------------------ | ------- | ------------------------------------------------------------- |

| `use-decimal`      | true    | Flag used to indicate if the progress value is in decimals or interger. When `true` a value like `0.7` will represent 70%; and when `false`, a value like `70` will represent 70%. |

| `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](http://www.10quality.com).