svg-progress-bar

> A simple,progress bar for Vue.js

 

🐾online demo |
🌾 simple demo |
📘 Chinese Document

Browser support

|
IE |
Firefox |
Chrome |
Safari |
iOS |
Android |
|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|
| IE9+ | ✓| ✓ | ✓ | ✓ | ✓ | ✓

What is svg-progress-bar？

svg-progress-bar is a based on circles of the secondary development of project vue components

Features

* [x] zero dependence, small volume.
* [x] currently supports loop/rectangle progress bar.
* [x] the configuration meets a variety of requirements.
* [x] ongoing maintenance

Installation

$3

``bash
npm install svg-progress-bar --save
`

Usage

$3

> Specific reference example-src/App.vue

`js
// main.js
import Vue from 'vue'
import svg from 'svg-progress-bar'
// you can set componentName default componentName is svg-progress-bar
Vue.use(svg,{componentName: 'percent-bar'})
// 1.global install
import Vue from 'vue'
import svg from 'svg-progress-bar'
// you can set custom componentName
Vue.use(svg,{componentName: 'percent-bar'})

// 2.single .vue file install

`
s

$3

Example:
> Specific reference test/test.html
`html


...










`

Configure list

|key|description|default|val|
|:---|---|---|---|
|type|type of the progress bar|'circle'|'circle' 'rect'|
|value|value of the progress bar|0|Number String|
|valAddCalBack|valAddCalBack of the progress bar|[]|[{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}]|
|options|options of the progress bar|{}|Object|
|options.valRate|value add Rate of the circle progress bar(suggest <= 1)|1|Number|
|options.radius|radius of the circle progress bar|50|Number|
|options.circleWidth|stokeWidth of the circle progress bar|10|Number|
|options.varyStrokeArray|varyStrokeArray of the circle progress bar if you want wide ranging|null|Array|
|options.circleLinecap|circleLinecap of the circle progress bar|''|'round',''|
|options.maxValue|maxValue of the progress bar|100|Number|
|options.text|text of the progress bar|function (value) {return this.htmlifyNumber(value)}|Function|
|options.textColor|text color of the progress bar|#000|color|
|options.pathColors|pathColors of the progress bar|['#EEE', '#F00']|Array|
|options.gradientColor|gradientColor of the progress bar|null|Array|
|options.gradientOpacity|gradientOpacity of the progress bar|[1,1]|Array|
|options.duration|duration of the progress bar|500|Number|
|options.rectWidth|rectWidth of the rect progress bar|400|Number|
|options.rectHeight|rectHeight of the rect progress bar|40|Number|
|options.rectRadius|rectRadius of the rect progress bar|0|Number`|

Changelog

See the GitHub release history.

License

svg-progress-bar is open source and released under the MIT License.