这篇文章分享使用css3来制作圆环进度条的实例
最近PC端项目要做一个这样的页面出来，其他的都很简单，关键在于百分比的圆环效果。我最初打算是直接使用
canvas
来实现的，因为canvas实现一个圆是很简便的。
下面贴出canvas实现圆环的代码，有需要的可以拿去尝试，因为今天主要是讲css3的方法，canvas我就不多解释了
后来之所以是因为没有去使用canvas去实现是因为产品和我说这个任务以后会非常多，我问会不会超过99个？他说有可能，你上限设999吧。
立即学习
“
前端免费学习笔记（深入）
”；
要是999个canvas的圆环去渲染。。。上百个都够呛了吧，无奈之下只好去选用css3，至少这样会快很多。但是css貌似没有直接画个进度环的方法吧。
我稍后会贴出完整的代码，这里先讲述一下大概的结构。
要实现
进度条
的样式用css的话我们能想到的方法好像只有用大小不同的圆去叠加，如果是要那种动画不停旋转的loading效果那太简单了，我会很开心的，可惜。。
首先我们要来个背景圆，比如这样
接着来个内圆去遮罩
有点像样子了，那我们接下来就是重点了，如何让它跟着百分比如动态显示改变。
js
是必须的，我先讲样式
下一步我们要创建两个半圆比如这样
css实现半圆的方法有很多，大家可以自行百度，我是采用clip:rect();这个方法去裁剪成半圆的 ，做完这些 我们就只需要用js去控制左右两边的半圆rotate()的旋转角度就好了。
记得最后把左右两个半圆的颜色统一一下就可以了，下面我会贴出源代码，大家引入一个jq就可以直接用了
10%