在业务需求中，遇到了上述开发需求环的进度栏。如上所示，在实际开发中，环进度栏也更为常见。将更多使用组件库。
最初旨在使用边界拉迪迪斯，将有两个问题
1.圆的切口是圆形的
2.不是整个圆圈
这不是很合适。
然后我搜索并在SVG标签中找到了圆
SVG标签，SVG标签和几个图形基本上都使用了其他图形
步骤1：首先创建一个SVG画布，绘制一个简单的圆圈。
步骤2：两个圆圈，底部圆圈，外面的渐变颜色
步骤3：使用圆属性
strokelinecap =“圆形” //切割表面为圆形
strokedasharray =“ 400，134” //实现空白
strokedashoffset =“ -134” //差分位置差距
因为这是一个固定的百分比，所以我不知道如何通过CSS，我想动作。然后我的代码是为每个百分比编写的。
那我不这么认为。
https://mobile.ant.design/zh/components/progress-circle
Antd-Mobile CircleProgress
看亮点。不要看其他人。
通过CSS的百分比直接发现CSS的百分比，并通过计算进行计算。
然后敲了几个演示进行比较。DEMO1是我自己的第一版Demo2，Antd-Mobile的源代码，Demo3是最终版本
计算不是很聪明，有些组合不清楚吗？
颜色梯度也可能需要通过进度的特定值，然后是梯度来计算。
原始：https：//juejin.cn/post/7095676605271375908