資訊專欄INFORMATION COLUMN
摘要：簡介實際開發中，文件的圖片的加載等情形下經常需要展示進度情況。最簡單的直接顯示百分之多少即可，然后一般情況下就是條形進度條，設置長度表示已完成進度。這里介紹一下稍微復雜的圓形進度條如何實現。
實際開發中，文件的download、upload、圖片的加載等情形下經常需要展示進度情況。 最簡單的直接顯示百分之多少即可，然后一般情況下就是條形進度條，設置長度表示已完成進度。這里介紹一下稍微復雜的圓形進度條如何實現。
transform 旋轉 (這里只需要用到2d )
clip 裁剪 設置元素的一部分可視
整體的圓是分成兩個半圓來實現的，為什么呢？因為要。。。每個圓遮住一半，不然完整的圓滾來滾去跟沒滾一樣。
下面只說明半圓的實現方式，最后拼在一起即可，以右半邊為例一步步說明：
設圓整體區域 200px * 200px
遮住左邊的100*200
{
clip: rect(0,200px,auto,100px) //不明白的先看相關資料
}
然后旋轉一定的角度
{
transform: rotate(40px) //不明白語法的先找下資料
}
看上圖發現，我們只要求半圓的實現，但上圖已經超出右邊半圓到左邊區域了，到時候會覆蓋左邊，所以我們要把超出去的部分遮住，于是給右邊半圓設置父容器，它的大小形狀跟上面的半圓一樣，只是它不旋轉，這樣就能遮住超出去的旋轉半圓了。（這里我們給父容器加上底色）加上父容器后，效果如下。至此完成右邊半圓的設置，在加上左邊半圓，就搞定了。
具體使用時，當進度<= 50%，只有右邊旋轉，左邊保持不動；>50%的時候，右邊旋轉180度，左邊也旋轉一定度數
旋轉的進度條，除了用在圓上，矩形上也可以。一樣的道理，只是把旋轉的區域增大，然后用矩形來截取即可。
圓形進度條
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111595.html
摘要：需求概要小程序中使用圓形倒計時，效果圖思路使用個一個是背景圓環，一個是彩色圓環。 需求概要 小程序中使用圓形倒計時，效果圖：showImg(https://segmentfault.com/img/bV3Bko?w=265&h=267); 思路 使用2個canvas 一個是背景圓環，一個是彩色圓環。 使用setInterval 讓彩色圓環逐步繪制。 解決方案 第一步先寫結構 一個盒...
摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 引子 移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 CSS3 實現圓環 demo 剛開始寫這個圓環的時候是參照帖子上給出的css代碼代入，然后根據自己的需求改，發現圓環可以完美轉動了，但是好像沒...
摘要：引子移動端做一個加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 引子 移動端做一個 loadiing 加載的圖標，跟以往沿用的都不太一樣，是一個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。 CSS3 實現圓環 demo 剛開始寫這個圓環的時候是參照帖子上給出的css代碼代入，然后根據自己的需求改，發現圓環可以完美轉動了，但是好像沒...
閱讀 2617·2021-11-22 15:25
閱讀 1446·2021-11-15 17:59
閱讀 1148·2021-09-29 09:34
閱讀 1557·2021-09-26 09:46
閱讀 3040·2021-09-02 15:40
閱讀 1200·2019-08-30 15:56
閱讀 3293·2019-08-30 15:55
閱讀 702·2019-08-29 17:08
