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
- zero dependence, small volume.
- currently supports loop/rectangle progress bar.
- the configuration meets a variety of requirements.
- ongoing maintenance
Installation
NPM
npm install svg-progress-bar --save
Usage
ES6
Specific reference example-src/App.vue
// **main.js**// you can set componentName default componentName is svg-progress-barVue// 1.global install// you can set custom componentNameVue // 2.single .vue file install<script> components: svg </script>
s
normal use (script tag)
Example:
Specific reference test/test.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.