代码拉取完成，页面将自动刷新
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
npm install svg-progress-bar --save
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
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.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型