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

实现原理

原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。

半环的实现

先来看其结构。

HTML

<div class="pie_right"> <div class="right"></div> <div class="mask"><span>0</span>%</div> </div>

结构非常简单。这样的结构，大家一看就清楚。

CSS

.pie_right {width:200px; height:200px; position: absolute; top: 0; left: 0; background:#0cc; } .right { width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0; left: 0; } .pie_right, .right { clip:rect(0,auto,auto,100px); } .mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center;