Vue实现动态圆环百分⽐进度条
最近在开发⼩程序的时候，碰到⼀个实现圆环百分⽐进度条的需求，类似如下设计图：
⼩⽩的我感觉实现起来有难度，于是上百度看看别⼈是怎么做的，结果没到⼀个满意的，要不是静态的实现，就是需要⽤到⽐较多的DOM操作，⼩程序还是尽量避免直接操作DOM。
下⾯是我以Vue组件形式做的⼀个动态的实现，先上效果图：margin属性值可以为百分比
效果
实现步骤
画⼀个饼图
.pie {
display: inline-block;
position: relative;
width: 150px;
height: 150px;
margin-top: 40px;
border-radius: 50%;
background: #ccc;
background-image: linear-gradient(to right, transparent 50%, #4479FD 0);
color: transparent;
text-align: center;
}
实现占⽐效果
通过添加伪元素遮挡和移动实现，代码如下：
.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 5s linear infinite, bg 10s step-end infinite;
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: #4479FD; }
}
使⽤CSS动画延迟属性
将上⾯的animation动画时间分别改为50, 100，这样可以直接在animation-delay传⼊相应的延迟秒数，⽐如-60s则是显⽰在百分之六⼗
animation-play-state: paused;
animation-delay: -60s;
实现圆环形状
直接在div⾥加上⼀个定位的div
<div class="pie">
<div class="pie-inner">
{{num}}%
</div>
</div>
加上⼀个匀速动画
startAnimate (step, limit, speed) {
setTimeout(() => {
/
/ num 为百分⽐
if (this.num < limit) {
this.num += step
this.startAnimate(step, limit, speed)
} else {
this.num = limit
}
}, speed)
}
给animation-delay绑定计算属性
实时根据num转化为相应的延迟秒数
computed: {
delay () {
return `-${this.num}s`
}
}
总结
⾄此，⼀个动态的圆环百分⽐进度条基本实现了，还不是很完善，有什么意见或者疑问欢迎提出来。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。