插件名称 | vue-radial-progress |
---|---|
发布时间 | 2020年6月21日 |
插件作者 | wyzantinc |
Vue JS组件,可为您的Web应用程序生成动画的径向(圆形)SVG进度条。
v0.3.2(06/18/2020)
特征:
npm install vue-radial-progress
<template>
<radial-progress-bar :diameter="200"
:completed-steps="completedSteps"
:total-steps="totalSteps">
<p>全部步骤: {{ totalSteps }}</p>
<p>完成步骤: {{ completedSteps }}</p>
</radial-progress-bar>
</template>
<script>
import RadialProgressBar from 'vue-radial-progress'
export default {
data () {
return {
completedSteps: 0,
totalSteps: 10
}
},
components: {
RadialProgressBar
}
}
</script>
名称 | 默认值 | 描述 |
---|---|---|
diameter | 200 | 进度条圆的直径(以像素为单位)。 |
totalSteps | 10 | 完成进度条的步骤总数。 |
completedSteps | 0 | 进度栏中已完成的步骤数。 |
startColor | #bbff42 | 进度条渐变前沿的颜色。 |
stopColor | #429321 | 进度条渐变的辅助颜色。 |
innerStrokeColor | #323232 | 进度条的背景色。 |
strokeWidth | 10 | 进度条的宽度。 |
innerStrokeWidth | 10 | 背景/内圆的宽度。 |
strokeLinecap | round | 圆的描边线帽的类型。 |
animateSpeed | 1000 | 动画一个步骤的时间(以毫秒为单位)。 |
fps | 60 | 动画应运行的每秒帧数。 |
timingFunc | linear | 用于CSS过渡的过渡计时功能。请参阅过渡计时功能。 |
isClockwise | true | 控制进度条的方向。 |