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 += stepthis.startAnimate(step, limit, speed)} else {this.num = limit}}, speed)
}

给`animation-delay`绑定计算属性

实时根据num转化为相应的延迟秒数

computed: {delay () {return `-${this.num}s`}
}

总结

至此，一个动态的圆环百分比进度条基本实现了，还不是很完善，有什么意见或者疑问欢迎提出来~

Vue实战--动态圆环百分比进度条相关推荐

微信小程序canvas 画动态圆环百分比进度条实例根据手机屏幕宽度自适应放大缩小
这里是wxml代码: <component-analysis-report active="0" bindselectReport="selectReport&qu ...
java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环我们了解到了怎么使用ca ...
vue 圆形百分比进度条_vue实用组件——圆环百分比进度条
有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二 ...
用Canvas画圆环百分比进度条
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-e ...
YCProgress自定义百分比进度条
目录介绍 1.本库优势亮点 2.使用介绍 2.1 圆环百分比进度条 2.2 直线百分比进度条 2.3 仿杀毒类型百分比进度条 3.注意要点 4.效果展示 5.其他介绍 1.本库优势亮点圆环百分比进度 ...
android 画圆弧动画,『Android自定义View实战』自定义带入场动画的弧形百分比进度条...
写在前面这是在简书发表的处女座,这个想法也停留在脑海中很久了,一直拖到现在(懒癌发作2333),先自我介绍一番,一枚刚毕业不久的Android程序猿,初出茅庐的Android小生,之前一直在CSDN ...
uni-app中自定义图表（canvas实现chart图表）开发篇（1）-圆环带进度条
经常开发中,会遇到各种各样图表,这时大家普遍会想到去找插件.uniapp中常用的有uchart.js和echart.js,这对图表要求不高的项目来说,是很便捷的.但有时会遇到一些定制图表,加上UI的美 ...
android绘制环形进度_Android动态自定义圆形进度条
这篇文章主要介绍了Android动态自定义圆形进度条,需要的朋友可以参考下效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; fl ...
vue自适应带圆圈的进度条实现#根据数量占比计算进度条长度#颜色可控
一些组件库例如ele的进度条实现只是简单的实现进度条样式,进度条的长度是百分比形式,未做到占比数/总数去动态计算,这是我在这里要去实现的不罗嗦,先看样式 <!--@name:进度条封装@de ...

Vue实战--动态圆环百分比进度条

效果

画一个饼图

实现占比效果

使用CSS动画延迟属性

实现圆环形状

加上一个匀速动画

给`animation-delay`绑定计算属性

总结

Vue实战--动态圆环百分比进度条相关推荐

最新文章

热门文章

Vue实战--动态圆环百分比进度条

效果

画一个饼图

实现占比效果

使用CSS动画延迟属性

实现圆环形状

加上一个匀速动画

给animation-delay绑定计算属性

总结

Vue实战--动态圆环百分比进度条相关推荐

最新文章

热门文章

给`animation-delay`绑定计算属性