svg-progress-bar
A simple,progress bar for Vue.js
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 --saveUsage
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.
