環形進度條

原理非常的簡單，在這個方案中，最主要使用了css3的transform中的rotate和css3的clip兩個屬性。用他們來實現半圓和旋轉效果。

先來看其結構。

html

css

.pie_right

.right

.pie_right, .right

.mask

實現半圓還是挺簡單的，利用border-radius做出圓角，然後利用clip做出剪下效果，（clip使用方法，詳見站內介紹），mask的部分是為了遮擋外面的容器，致使在視覺上產生圓環的效果：

旋轉的話，那更容易實現了，就是在css的right中加入.right

這樣就可以看到乙個半弧旋轉的效果了。

同樣道理，拼接左半邊圓環

.circle .pie_left, .pie_right .left, .right .pie_right, .right .pie_left, .left .mask

ok了，基本上我們的圓環已經實現完成了，下面是加入js效果。

首先，我們需要考慮的是，圓環的轉動幅度大小，是由圓環裡面數字的百分比決定的，從0%-100%，那麼圓弧被分成了每份3.6°；而在180°，也就是50%進度之前，左側的半弧是不動的，當超過50%，左邊的半弧才會有轉動顯示。

$(function()  else ;
});});