在开发微信小程序的时候遇到了圆形进度条的需求。用canvas绘图比较麻烦：1、为了实现不同屏幕的适配，必须动态计算进度条的大小；2.在小程序中，canvas的画布级别最高，不易扩展。但是使用css3和js来实现进度条可以很轻松的避免这个问题。注：本文使用jquery实现，但原理是一样的。您只需要在小程序中定义和更改相应的变量即可。1.进度条的样式在平时的开发中，经常会用到元素的边框来显示圆形的Circular图案，在使用css3实现圆形进度条的时候也会用到这个技巧。为了实现上圆形边框和动态覆盖下圆形边框，一共需要一个圆，两个矩形，两个半圆：一个圆用于显示底层背景，两个半圆用于覆盖底层背景显示进度，另外两个矩形用于覆盖不需要显示的进度。如下图：最下面的圆圈是进度条的背景，底部左右有两个矩形，用来遮住不显示的进度条。两个矩形内各有一个半圆表示进度。一般情况下，用正方形画出的半圆，其直径与水平面的夹角为45度。为了让两个半圆刚好覆盖整个圆，需要使用css3中的rotate对原来的正方形进行旋转，达到覆盖整个背景的效果。如下图（为了表达清楚，这里用正方形表示）：如图，将矩形内的半圆向右（顺时针）旋转45度，可以得到一张图片进度覆盖整个背景。将半圆向左（逆时针）旋转135度以获得仅包含进度条背景的图像。为什么一直向左旋转而不是一直向右旋转，当然是因为要达到的效果是：进度从最上面开始，顺时针结束。至此，思路就很清晰了。只需要通过百分比来控制左右进度显示即可。实际这部分的html和css代码如下：html代码
