A simple,progress bar for Vue.js
🐾online demo | 🌾 simple demo | 📘 Chinese Document
 IE |
 Firefox |
 Chrome |
 Safari |
 iOS |
 Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
svg-progress-bar is a based on circles of the secondary development of project vue components
- zero dependence, small volume.
- currently supports loop/rectangle progress bar.
- the configuration meets a variety of requirements.
- ongoing maintenance
npm install svg-progress-bar --saveSpecific reference example-src/App.vue
// **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
<script>
import svg from 'svg-progress-bar'
export default {
components: {
svg
}
}
</script>s
Example:
Specific reference test/test.html
<html>
<head>
...
</head>
<body>
<div id="app">
<svg-progress-bar></svg-progress-bar>
</div>
<script src="vue.js"></script>
<script src="svg-progress-bar"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>| 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 |
See the GitHub release history.
svg-progress-bar is open source and released under the MIT License.