整體思路是:通過裁切(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實現環形進度條
有詢問原始碼的盆友,整理了一下把原始碼鏈結放上吧!我是原始碼鏈結 進度條效果如下 整圓的效果處理會簡單些,不完整環實現起來細節多點。下邊是實現邏輯和過程。進度條組成 環形 兩種顏色進度條,當餘量少於50 時進度條顏色由綠色變為黃色。進度條結構由兩個疊加環形組成 上疊加環形展示剩餘量,深色 下疊加環形...
使用CSS3實現環形進度條效果
進度條效果如下 整圓的效果處理會簡單些,不完整環實現起來細節多點。下邊是實現邏輯和過程。進度條組成 環形 兩種顏色進度條,當餘量少於50 時進度條顏色由綠色變為黃色。進度條結構由兩個疊加環形組成 上疊加環形展示剩餘量,深色 下疊加環形展示100 總量,淺色。樣式實現 1 畫乙個方形,如圖中陰影部分所...
環形進度條
在專案中做廣告頁,需要乙個5s倒計時的進度條。就用了calayer寫了乙個簡單的進度條。直接上 import inte ce circularprogressview uiview void start void stop import circularprogressview.h import i...