css3 製作圓環進度條

2021-09-14 02:52:38 字數 1392 閱讀 6548

移動端做乙個

loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。

demo

剛開始寫這個圓環的時候是參照帖子上給出的css**代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，該動動腦子還是有必要的。

css實現圓環的方法很多，我看大部分都是採用邊框（border）+ 裁剪（clip：rect（））來實現的，所以我也準備採用這種方式。

主要是布局問題，我看大部分圓環進度條都大同小異，就是布局和轉動方式不同

// html 


// css 


.loading 


.circle


.clip-auto


.percent


.left


.right


.wth0


// js


$('.left').animate(, 


$(this).css();


},duration:500


})
通過對 .circle(左右兩側圓環的父元素) 的裁剪只顯示左側的圓環，右側的圓環的寬度直接為 0 ，當進度條進行到50%的時候，即左側圓環轉動角度為 transform: rotate(180deg) ，將 .circle 的裁剪去掉 (.clip-auto)，右側圓環的寬度恢復。基本就是這個套路。

如果僅用

$(this).css();
來控制角度的轉動，沒有絲毫動畫顯得比較生硬，這時候就要考慮給它加個動畫了，而jq提供的 animate 對只有數字值可建立動畫，而字串型別的值無法建立動畫。

這時候需要用到 animate的step屬性了。

animate的progress屬性是我們經常用的，對數字值的屬性進行操作，但是字串值的屬性卻並不能用它進行操作，這時候就需要step屬性了。

step 顧名思義就是對一段動畫進行步驟分解，在animate方法中，每一步具體是怎麼分解的，不是由我們設定的css屬性值和動畫時長來決定的，是由系統來決定的。

$(".left").animate(,


});
這個地方主要是解釋為什麼在這裡給角度賦值，順便說明一下它到底將該值分成多少個片段並不是由我們人為控制的。

$(".demo").animate(, 


console.log(fx.prop+": "+n);


},duration:2000


})
做這個動畫遇到了自己兩個知識盲點，clip的運用以及jq的step屬性，寫這篇文章主要目的還是加深理解，以及分享。

css3 製作圓環進度條

移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...

Unity圓環進度條製作

最近有個在unity中製作圓環進度條的需求，並在圓中顯示進度數值，類似於圖1 圖1.圓環進度條 平時製作直線的進度條比較多，突然要求做個圓環的有些不適應。不過，這個需求google一下其實大量的解答就出來，關鍵字 unity circle progress bar 於是我採用了 unity5 rad...

css3 實現進度條

首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate deg 實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為 360deg 360deg 一般的進度條的是長這樣的 這可以看成是乙個圓弧在一直旋轉，h...