Vue实现动态圆环百分比进度条
最近在开发小程序的时候，碰到一个实现圆环百分比进度条的需求，类似如下设计图：
小白的我感觉实现起来有难度，于是上百度看看别人是怎么做的，结果没找到一个满意的，要不是静态的实现，就是需要用到比较多的DOM操作，小程序还是尽量避免直接操作DOM。
下面是我以Vue组件形式做的一个动态的实现，先上效果图：
效果
画一个饼图
.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`
}
}
总结
至此，一个动态的圆环百分比进度条基本实现了，还不是很完善，有什么意见或者疑问欢迎提出来。
相关文章
Jenna
2020-10-09
Violet
2021-03-07
Claire
2021-05-21
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20
Nita
2023-07-20
Irene
2023-07-20
Ebony
2023-07-21