实现一个圆形进度条

现在的一些数据运营活动h5页面中,通常回涉及到圆形的进度条,比如京东白条,蚂蚁芝麻分。最近做了一个类似的,当然前期想法是用canvas做,但是考虑到低端安卓手机的渲染能力,最终以纯原生css+js实现,总结一下

效果图

实现一个圆形进度条_第1张图片

思路

index0底层一个色值#c1a76b的圆,中间index1一个三角形,也就是底边缺的效果,上层index2是白色全圆(带阴影,600和信用极好包裹在里面),另外左右50%各铺一个index3,index4透明层,这个层overflow:hidden,两个层里面都有一个#f7f7f7的填充,通过旋转这两个填充物来实现圆形进度效果(先左边旋转180deg完,再旋转右边)

动态图

实现一个圆形进度条_第2张图片

贴代码



    
        
    
    
        
600
信用极好

在线demo地址

点击进入

存在问题

  • 左边当旋转到180deg有一个放缓慢的效果

转载于:https://www.cnblogs.com/liliangel/p/10096248.html

你可能感兴趣的:(实现一个圆形进度条)