svg-progress-bar
v0.1.17
Published
A simple,progress bar for Vue.js
Downloads
391
Maintainers
chenxuan0316Readme
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
- [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
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.