# svg-progress-bar
**Repository Path**: mirrors/svg-progress-bar
## Basic Information
- **Project Name**: svg-progress-bar
- **Description**: 一个简单的 Vue.js 进度条组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2019-08-07
- **Last Updated**: 2025-11-08
## Categories & Tags
**Categories**: vue-extensions
**Tags**: None
## README
# svg-progress-bar
> A simple,progress bar for Vue.js
[ ](https://www.npmjs.com/package/svg-progress-bar) 
🐾online demo |
🌾 simple demo |
📘 Chinese Document
## Browser support
| [
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS | [
](http://godban.github.io/browsers-support-badges/)Android |
|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|
| IE9+ | ✓| ✓ | ✓ | ✓ | ✓ | ✓
## What is svg-progress-bar？
`svg-progress-bar` is a based on [circles](https://github.com/lugolabs/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
### NPM
```bash
npm install svg-progress-bar --save
```
## Usage
### ES6
> Specific reference [example-src/App.vue](https://github.com/chenxuan0000/svg-progress-bar/blob/master/examples-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
### normal use (script tag)
Example:
> Specific reference [test/test.html](https://github.com/chenxuan0000/svg-progress-bar/blob/master/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](https://github.com/chenxuan0000/svg-progress-bar/releases).
## License
svg-progress-bar is open source and released under the [MIT License](LICENSE).