浅谈一下关于使用 CSS3 来制作圆环进度条

Question

最近 PC 端项目要做一个这样的页面出来，其他的都很简单，关键在于百分比的圆环效果。我最初打算是直接使用 Canvas 来实现的，因为canvas实现一个圆是很简便的。

下面贴出 Canvas 实现圆环的代码，有需要的可以拿去尝试，因为今天主要是讲 CSS3 的方法，Canvas 我就不多解释了，在线示例：https://www.wenjiangs.com/runcode?slug=7lrZvBEP

后来之所以是因为没有去使用 Canvas 去实现是因为产品和我说这个任务以后会非常多，我问会不会超过 99 个？他说有可能，你上限设 999 吧！

要是 999 个 Canvas 的圆环去渲染。上百个都够呛了吧，无奈之下只好去选用 CSS3，至少这样会快很多。但是 CSS 貌似没有直接画个进度环的方法吧。我稍后会贴出完整的代码，这里先讲述一下大概的结构。

要实现进度条的样式用css的话我们能想到的方法好像只有用大小不同的圆去叠加，如果是要那种动画不停旋转的 loading 效果那太简单了，我会很开心的，可惜。

首先我们要来个背景圆，比如这样

接着来个内圆去遮罩

有点像样子了，那我们接下来就是重点了，如何让它跟着百分比如动态显示改变。js是必须的，我先讲样式，下一步我们要创建两个半圆比如这样

CSS 实现半圆的方法有很多，大家可以自行百度，我是采用 clip:rect(); 这个方法去裁剪成半圆的 ，做完这些，我们就只需要用 js 去控制左右两边的半圆 rotate() 的旋转角度就好了。

记得最后把左右两个半圆的颜色统一一下就可以了，下面我会贴出源代码，大家引入一个 jq 就可以直接用了

实现代码：https://www.wenjiangs.com/runcode?slug=TkJShRlY