在写这篇文章之前，笔者查阅了很多博客，但大部分前辈只是贴出代码，没有明确的注释，所以新手很容易就可以了多云。在这里，作者在了解了原理之后，对代码进行了优化，决定写（总结）一个清晰明了的循环进度条的实现，方便后人快速理解。1.实现原理首先我们来画一个圆圈（黑色）。接下来，再来两个半圆来覆盖黑色圆圈。（为了演示，左右两边颜色不同。）这时候我们顺时针旋转右边的蓝色半圆，下面的黑色圆就会露出来。比如我们旋转45度（12.5%），效果就出来了。如果我们把蓝色右半圆也设置成灰色，看看效果，12.5%的饼图就出来了！OK，我们试试旋转更大的度数，比如40%（144度）、50%（180度）、60%（216度）如下图。我们发现旋转180度后，右半圆与左半圆重合了。如果我们再次旋转，它会在右上角弹出，这显然不是我们想要的。我们想要的是继续旋转被黑色覆盖。..嗯。..怎么做？我们把右边的圆放回原来的位置，把它涂成黑色（和底色一样），然后旋转左边的半圆（它在右边的半圆的底部），这样它就会被右边的半圆覆盖。好了，废话不多说，我们把左边的半圆顺时针旋转45度，效果就出来了。可以想象，如果继续旋转，在180度时，它会被右边的半圆完全覆盖，而左边的底色会完全暴露，这样100%就显示出来了。最后，添加一个白色的小圆圈并将其放在正中间。好的，到目前为止，我们已经想出了如何去做。2.代码实现html部分
