如下內容來自於去年的一次案例,隨着微信小程序的不斷改版,部分條件可能已再也不適用,請謹慎參考。內容比較短,主要都在代碼片斷裏。html
某個項目中須要用到以下圖這樣的一個圓環行的進度條。
一開始的想法是使用canvas來實現,可是canvas是原生組件,層級最高(當時的狀況),實際使用時不方便使用。因此決定嘗試用純CSS來實現這一效果。canvas
先上代碼:https://developers.weixin.qq....
這裏主要用到的是CSS中的clip屬性,將一個正方形裁剪後只顯示右側一半,可是仍然以正方形中心爲圓心來旋轉,來實現須要的角度。小程序
clip: rect(0rpx, 46rpx, 92rpx, 0rpx);
這樣最上面那個進度條就能夠由如下三部分疊加,在最上面再疊加一個小一號的白色圓形,最外層加上圓角後就能夠實現。(下圖中紅線示例了最外層的圓角以及最上層疊加的白色圓形位置)
疊加效果
用到藍色圓環小於180度的狀況下,須要把背景色和前景色對調。微信小程序