實現環形進度條（CSS3 jQuery Vue）

整體思路是：通過裁切（clip）產生兩個半圓展示出靜態的進度條，而後通過旋轉（rotate）角度的變化產生動態效果。

（1）css的乙個不常見的屬性：

clip: rect(top, right, bottom, left);

這個屬性規定了乙個裁切的矩形，其中top和bottom所指定的偏移量是從元素盒子頂部邊緣算起，right和left所指定的偏移量是從元素盒子左側邊緣算起（這裡需要重點注意的是bottom和right的計算方式）。看下面這張超級清晰的圖（直接把w3cplus的圖搬過來了，帶著水印不違規的吧？）：

需要注意的是：clip屬性只能在元素設定了「position:absolute」或者「position:fixed」屬性時起作用。clip無法在設定「position:relative」和「position:static」上工作。

關於clip，想要深入了解請看這篇文章:

（2）css的另乙個屬性：

transform: rotate(deg);

順時針旋轉一定的角度。

//html 0%//css .pie-right .right .pie-right, .right .mask

效果如下：

此時，元素pie-right完全被元素right遮住了。

然後，我們來旋轉一下：

.right

旋轉後效果如下：

現在我們可以看到，旋轉了30度時，露出的紅色部分就是我們要的進度，這是pie-right元素的顏色。而藍色部分right元素的顏色，是我們還未到達的進度。

實現環形進度條意味著我們需要左右兩個半圓，因此html結構要改變一下：

//html 0%//css .circle .pie-right, .pie-left .right, .left .pie-right, .right .pie-left, .left .mask

效果是介樣滴：

此時進度是0，讓我們來rotate一下，先旋轉30度吧

.right

於是就變成了這樣：【請始終記住，紅色部分是當前進度。】

然後再旋轉210度看看效果【210度就是右邊完全旋轉，左邊再旋轉30度】：

.right .left

長這樣：

最後的最後，當進度數值動態增加時，通過js去改變旋轉的角度就可以實現進度條動態變化了。

進度數值每增加1，角度增加3.6度，還要注意的是，當進度小於50%時，左側進度條沒有變化，當大於50%，左側進度條才開始改變。

我們可以寫乙個函式:

function changeprocess(value)  else 
}

當進度值變化時，呼叫這個函式即可。

勤快的我去jsfiddle裡寫了一下（這個是jquery的實現）：jsfiddle

這個是vue的實現： vue環形進度條。用到vue的繫結內聯樣式。

參考文章：

利用jquery和css實現環形進度條

實現環形進度條（CSS3 jQuery Vue）

使用css3實現環形進度條

使用CSS3實現環形進度條效果

環形進度條

實現環形進度條（CSS3 jQuery Vue）

使用css3實現環形進度條

使用CSS3實現環形進度條效果

環形進度條

相關推薦