jQuery CSS3實現環形進度條

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

先來看其結構。

html

0%

結構非常簡單。這樣的結構，大家一看就清楚。

css

.pie_right .right .pie_right, .right .mask

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

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

同樣道理，拼接左半邊圓環，為了讓我們html結構更易懂以後寫js更簡便，我對結構做了一下改造，並作了效果優化：

html

0%

css

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

效果如下：

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

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

那麼，原理明確之後，其jquery**如下（刪除css中的旋轉效果，在js裡重寫）：

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

則，改變mask裡面的span 的數值，我們就會看到最終效果。

這樣我們只要從後台獲取當前流程的進度值，傳給span，那麼我們頁面上就能看到這樣圓環的進度效果啦。