近日在開發的頁面中，需要製作乙個動態的圓形進度條，首先想到的是利用兩個矩形，寬等於直徑的一半，高等於直徑，兩個矩形利用浮動貼在一起，設定overflow：hidden屬性，作為盒子，內部有乙個與其寬高相等的子盒子，左側的子盒子左上角和左下角以及右側子盒子的右上角和右下角利用border-radius：半徑，這樣兩個矩形便組成了乙個完整的圓形。
我們讓左側的子盒子繞著右邊的中點旋轉180°，這樣左側的半圓就隱藏了，右側半圓同理。這個地方設定旋轉中心是用的transform-origin屬性，第乙個值是x軸方向，第二個值是y軸方向，可以用left，right，top，bottom，center這些詞，也可以用數值，數值的話是以圖形的左上角為原點。
然後我們給兩個半圓設定邊框，並且左邊的半圓的右邊框設定為none，右邊半圓的左邊框設定為none。此時乙個完整的圓環就設定完畢了，然後通過動畫旋轉半圓，邊框從隱藏區域逐漸進入可視區域，我們看到的效果就是圓形進度條的載入過程。如下：
這個方法在pc端沒有太大問題，然而在移動端，由於瀏覽器的渲染等問題，旋轉過程中圓角消失，或是出現較大鋸齒導致邊框部分缺失。
這時我們就不用邊框來作進度條，而是給圓形乙個背景色，再在上面覆蓋乙個半徑稍小的圓形遮罩，這樣漏出乙個圓環可以當作進度條，同樣可以實現以上功能。如下：
更於2017.8.14日
前幾天突然發現乙個問題，上圖所示border-radius圓角溢位的問題在iphone7機型上出現，而其他iphone機型上又沒問題，並且兩台不同版本iphone的ios版本都是一樣的，這也讓我非常鬱悶。通過測試，發現仍然是因為transform導致的元素溢位問題。後來通過css3乙個新屬性「mask-img」順利解決了這個問題，起原理如下圖（此圖源自網路）
此設定是先給元素設定背景，再用mask.png的透明部分遮住背景圖，有顏色的部分反而是透明的，會顯露出元素的背景圖。於是我們製作 了一張圓形遮罩圖用來遮住圓角溢位部分，便解決了這個問題。此外mask-size屬性可以設定遮罩圖的尺寸，也非常方便。
更於2018.6.25
Css3圓形進度條
圓形進度條原理 1 先設定乙個進度容器 目的為了旋轉 在容器中設定兩個隱藏容器，分為左右 目的為了隱藏半圓 再設定兩個半圓邊框 目的是容器再轉動的時候慢慢顯示出來 2 讓每個半圓邊框 與進度條邊框大小一致 超出隱藏容器的，3 讓內容溢位部分 隱藏 4 通過旋轉 讓半圓慢慢顯示 5 左邊的半圓 50 ...
css3 製作圓環進度條
移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...
css3 製作圓環進度條
移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...