在开发微信小程序的时候,遇到圆形进度条的需求。
使用canvas绘图比较麻烦:1、为了实现在不同屏幕上面的适配,必须动态的计算进度条的大小;
2、在小程序中,canvas的画布具有最高的层级,不易于扩展。
但使用css3和js实现进度条就很容易的避免了这方面的问题。
注:这篇文章里面使用jquery实现,但原理是一样的,在小程序中只需定义并改变相应的变量就行了一、进度条样式的样式在平时的开发中,经常使用元素的border来显示圆形图案,在使用css3实现圆形进度条时,同样也是使用这个技巧。
为了实现上面的圆形边框,动态的覆盖下面圆形边框,总共需要一个圆形,2个长方形和2个半圆形:一个圆形用来
1