Awesome
svg-progress-bar
A simple,progress bar for Vue.js
Browser support
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**
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
normal use (script tag)
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>
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.