利用jQuery和CSS实现环形进度条.pdf

利用jQuery和CSS实现环形进度条

最近项目里遇到一个有意思的效果，那就是圆形进度条，类似于这样的：

实现类似这样的效果方法很多。我主要想了2个解决方案，都是通过jQuery和CSS实现的，下

面就一一道来：

方法一：jQuery+CSS3

实现原理

原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip

两个属性。用他们来实现半圆和旋转效果。

半环的实现

先来看其结构。

HTML

lt;divclass=pie_rightgt;

lt;divclass=rightgt;lt;/divgt;