微信小程序 环形进度条_Web微信小程序圆环形进度条组件CSS实现

首先理解小程序的自定义组件。

原理

看了网上的一些教程，实现圆环用的是两个半圆的旋转，通过overflow: hidden来控制的。

首先绘制底层容器，一个正方形，通过圆角变圆，用来作为未读进度的圆环。然后在上面绘制两个半矩形，在圆形矩形中绘制两个半圆(通过border-left/right/top/bottom加上旋转角来实现，默认的旋转角为135°)。

通过控制半圆矩形(即半圆的父容器)，由于overflow: hidden，就会有如下的效果。

WXML代码：

由于必须通过js来控制style，所以不能写进wxss文件里，实在是很丑。

CSS代码如下：

.circle-progress-outter-circle{

border-ra