【微信小程序】纯CSS实现圆环型进度条

如下内容来自于去年的一次案例，随着微信小程序的不断改版，部分条件可能已再也不适用，请谨慎参考。内容比较短，主要都在代码片断里。

案例

某个项目中须要用到以下图这样的一个圆环行的进度条。

一开始的想法是使用canvas来实现，可是canvas是原生组件，层级最高（当时的状况），实际使用时不方便使用。因此决定尝试用纯CSS来实现这一效果。

实现原理

先上代码：https://developers.weixin.qq....
这里主要用到的是CSS中的clip属性，将一个正方形裁剪后只显示右侧一半，可是仍然以正方形中心为圆心来旋转，来实现须要的角度。

clip: rect(0rpx, 46rpx, 92rpx, 0rpx);

这样最上面那个进度条就能够由如下三部分叠加，在最上面再叠加一个小一号的白色圆形，最外层加上圆角后就能够实现。（下图中红线示例了最外层的圆角以及最上层叠加的白色圆形位置）

叠加效果

用到蓝色圆环小于180度的状况下，须要把背景色和前景色对调。