step by step:圓形loading進度條實現步驟詳解

時間 2019-12-05

標籤 step 圓形 loading 進度實現步驟詳解简体版

原文原文鏈接

簡介

實際開發中，文件的download、upload、圖片的加載等情形下常常須要展現進度狀況。最簡單的直接顯示百分之多少便可，而後通常狀況下就是條形進度條，設置長度表示已完成進度。這裏介紹一下稍微複雜的圓形進度條如何實現。html

先來效果圖

須要瞭解的幾個CSS知識點

transform 旋轉 (這裏只須要用到2d )spa
clip 裁剪設置元素的一部分可視code

實現步驟

總體的圓是分紅兩個半圓來實現的，爲何呢？由於要。。。每一個圓遮住一半，否則完整的圓滾來滾去跟沒滾同樣。
下面只說明半圓的實現方式，最後拼在一塊兒便可，以右半邊爲例一步步說明：orm

設圓總體區域 200px * 200px
htm

遮住左邊的100*200圖片

{
    clip: rect(0,200px,auto,100px) //不明白的先看相關資料
}

而後旋轉必定的角度ip

{
    transform: rotate(40px)   //不明白語法的先找下資料
}

看上圖發現，咱們只要求半圓的實現，但上圖已經超出右邊半圓到左邊區域了，到時候會覆蓋左邊，因此咱們要把超出去的部分遮住，因而給右邊半圓設置父容器，它的大小形狀跟上面的半圓同樣，只是它不旋轉，這樣就能遮住超出去的旋轉半圓了。（這裏咱們給父容器加上底色）加上父容器後，效果以下。至此完成右邊半圓的設置，在加上左邊半圓，就搞定了。
ci

Tips

具體使用時，當進度<= 50%，只有右邊旋轉，左邊保持不動；>50%的時候，右邊旋轉180度，左邊也旋轉必定度數開發
旋轉的進度條，除了用在圓上，矩形上也能夠。同樣的道理，只是把旋轉的區域增大，而後用矩形來截取便可。
it

貼上實例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圓形進度條</title>
    <style>
        .circle-left-mask, .circle-right-mask, .circle-left, .circle-right {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .circle-left-mask, .circle-right-mask {
            background-color: pink;
        }

        .circle-left, .circle-right {
            background-color: salmon;
        }

        .circle-left-mask, .circle-left {
            clip: rect(0, 100px, auto, 0);
        }

        .circle-right-mask, .circle-right {
            clip: rect(0, 200px, auto, 100px);
        }

        .circle-left {
            /*設置左邊的旋轉*/
            transform: rotate(0deg);
        }

        .circle-right {
            /*設置右邊的旋轉*/
            transform: rotate(40deg);
        }
    </style>
</head>
<body>
<div class="circle-left-mask">
    <div class="circle-left"></div>
</div>
<div class="circle-right-mask">
    <div class="circle-right"></div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。