Vue实现动态圆环百分比进度条 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

{{num}}%

加上一个匀速动画

startAnimate (step, limit, speed) {setTimeout(() => {// num 为百分比if (this.num < limit) {this.num += stepthis.startAnimate(step, limit, speed)} else {this.num = limit}}, speed)}

给animation-delay绑定计算属性
实时根据num转化为相应的延迟秒数