image.png
第一個 原型進(jìn)度條
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
https://madewith.cn/27](https://madewith.cn/27
Vue Radial Progress
<template>
<radial-progress-bar
:diameter="150" //直徑
:completed-steps="90" // 已經(jīng)完成
:total-steps="100" // 總完成數(shù)
innerStrokeColor="#0D2B4E" // 沒完成的顏色
startColor="red" // 完成開始的顏色
stopColor="green" // 完成結(jié)束的顏色
strokeLinecap="none" // 進(jìn)度條兩端是否有圓
:animate-speed="1000" // 動畫熟時間
>
<p>Total steps: {{ totalSteps }}</p>
<p>Completed steps: {{ completedSteps }}</p>
</radial-progress-bar>
</template>
<script>
import RadialProgressBar from 'vue-radial-progress'
export default {
data () {
return {
completedSteps: 0,
totalSteps: 10
}
},
components: {
RadialProgressBar
}
}
</script>
