以下内容来自于去年的一次案例，随着微信小程序的不断改版，部分条件可能已不再适用，请谨慎参考。内容比较短，主要都在代码片段里。 案例 某个项目中需要用到如下图这样的一个圆环行的进度条。 [图片] 一开始的想法是使用canvas来实现，但是canvas是原生组件，层级最高（当时的情况），实际使用时不方便使用。所以决定尝试用纯CSS来实现这一效果。 实现原理 先上代码：https://developers.weixin.qq.com/s/gjmxwUmm76dG 这里主要用到的是CSS中的clip属性，将一个正方形裁剪后只显示右侧一半，但是仍然以正方形中心为圆心来旋转，来实现需要的角度。 [图片] [代码]clip: rect(0rpx, 46rpx, 92rpx, 0rpx); [代码] 这样最上面那个进度条就可以由以下三部分叠加，在最上面再叠加一个小一号的白色圆形，最外层加上圆角后就可以实现。（下图中红线示例了最外层的圆角以及最上层叠加的白色圆形位置） [图片] 叠加效果 [图片] 用到蓝色圆环小于180度的情况下，需要把背景色和前景色对调。

[图片] 锥形渐变的正式语法如下： conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> ) 可以看出锥形渐变由3部分组成： 起始角度 中心位置 角渐变断点 其中起始角度和中心位置都是可以省略的 这里只用了角渐变断点 background-image: conic-gradient(green 80%,#fff 80% 100%); 主要实现就两步 1.利用conic-gradient画一个圆 [图片] 2.利用任意元素做个内圆遮挡 [图片] 最外层的背景色原来是白色的，这里为了便于识别改成了灰色，现在将灰色的背景还原为白色 [图片] 环形进度条完成，就这么简单 通过动态的设置green的值就可以改变进度条的值 补充:还可以实现渐变进度条效果 [图片] 代码片段: 利用css圆锥渐变实现环形进度条