https://github.com/chenxuan0000/svg-progress-bar
:panda_face: A simple,progress bar for Vue.js
https://github.com/chenxuan0000/svg-progress-bar
svg-progress-bar vue
Last synced: 8 months ago
JSON representation
:panda_face: A simple,progress bar for Vue.js
- Host: GitHub
- URL: https://github.com/chenxuan0000/svg-progress-bar
- Owner: chenxuan0000
- License: mit
- Created: 2018-01-08T08:49:49.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-17T07:36:26.000Z (over 6 years ago)
- Last Synced: 2025-04-12T23:06:46.160Z (8 months ago)
- Topics: svg-progress-bar, vue
- Language: Vue
- Homepage:
- Size: 219 KB
- Stars: 114
- Watchers: 5
- Forks: 28
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - SVG-进度条 - Vue.js的简单进度条. (UI组件 / 装载机)
- awesome-vue - svg-progress-bar - A simple,progress bar for Vue.js ` 📝 3 years ago` (UI Components [🔝](#readme))
- awesome-vue - svg-progress-bar - A simple progress bar for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - svg-progress-bar ★66 - A simple progress bar for Vue.js. (UI Components / Loader)
- awesome-vue - svg-progress-bar - A simple progress bar for Vue.js. (UI Components / Loader)
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
import svg from 'svg-progress-bar'
export default {
components: {
svg
}
}
```
s
### normal use (script tag)
Example:
> Specific reference [test/test.html](https://github.com/chenxuan0000/svg-progress-bar/blob/master/test/test.html)
```html
...
new Vue({
el: '#app'
})
```
## 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).