CSS圓形進度條詳解

一、CSS圓形進度條漸變

在實現CSS圓形進度條時，我們也可以將其改造為漸變的效果。如下所示：

    <div class="progress">
        <div class="progress-circle">
            <span class="progress-text">75%</span>
        </div>
    </div>

    .progress {
        width: 200px;
        height: 200px;
        background-color: #eee;
        border-radius: 50%;
        position: relative;
        margin: 50px auto;
    }
    .progress-circle {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        clip: rect(0, 200px, 200px, 100px);
        position: absolute;
    }
    .progress-circle:before {
        content: "";
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 200px;
        background-color: #09c;
        border-radius: 50%;
    }
    .progress-circle:after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 200px;
        background-color: #ccc;
        border-radius: 50%;
    }
    .progress-text {
        color: #333;
        font-size: 22px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .progress-circle:nth-child(1):before, .progress-circle:nth-child(1):after {
        transform: rotate(0deg);
    }
    .progress-circle:nth-child(1):after {
        background-color: #09c;
    }
    .progress-circle:nth-child(2):before, .progress-circle:nth-child(2):after {
        transform: rotate(30deg);
    }
    .progress-circle:nth-child(2):after {
        background-color: #7f0;
    }
    .progress-circle:nth-child(3):before, .progress-circle:nth-child(3):after {
        transform: rotate(60deg);
    }
    .progress-circle:nth-child(3):after {
        background-color: #f70;
    }
    .progress-circle:nth-child(4):before, .progress-circle:nth-child(4):after {
        transform: rotate(90deg);
    }
    .progress-circle:nth-child(4):after {
        background-color: #fb0;
    }
    .progress-circle:nth-child(5):before, .progress-circle:nth-child(5):after {
        transform: rotate(120deg);
    }
    .progress-circle:nth-child(5):after {
        background-color: #f00;
    }
    .progress-circle:nth-child(6):before, .progress-circle:nth-child(6):after {
        transform: rotate(150deg);
    }
    .progress-circle:nth-child(6):after {
        background-color: #71696a;
    }
    .progress-circle:nth-child(7):before, .progress-circle:nth-child(7):after {
        transform: rotate(180deg);
    }
    .progress-circle:nth-child(7):after {
        background-color: #09c;
    }
    .progress-circle:nth-child(8):before, .progress-circle:nth-child(8):after {
        transform: rotate(210deg);
    }
    .progress-circle:nth-child(8):after {
        background-color: #7f0;
    }
    .progress-circle:nth-child(9):before, .progress-circle:nth-child(9):after {
        transform: rotate(240deg);
    }
    .progress-circle:nth-child(9):after {
        background-color: #f70;
    }
    .progress-circle:nth-child(10):before, .progress-circle:nth-child(10):after {
        transform: rotate(270deg);
    }
    .progress-circle:nth-child(10):after {
        background-color: #fb0;
    }
    .progress-circle:nth-child(11):before, .progress-circle:nth-child(11):after {
        transform: rotate(300deg);
    }
    .progress-circle:nth-child(11):after {
        background-color: #f00;
    }
    .progress-circle:nth-child(12):before, .progress-circle:nth-child(12):after {
        transform: rotate(330deg);
    }
    .progress-circle:nth-child(12):after {
        background-color: #71696a;
    }

通過before和after屬性的使用，使得CSS圓形漸變進度條呈現出多重顏色共存的效果，為圓形進度條增加了許多新穎的玩法。

二、CSS圓環進度條

與CSS圓形進度條不同的是，圓環進度條不填充顏色，而是採用邊框寬度的變化表達進程的進度。如下所示：

    <div class="progress">
        <div class="progress-circle pie">
            <div class="left-side half-circle"></div>
            <div class="right-side half-circle">
                <div class="bar"></div>
            </div>
        </div>
        <div class="progress-circle">
            <span class="progress-text">75%</span>
        </div>
    </div>

    .progress-circle {
        position: relative;
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 20px;
    }
    .half-circle {
        position: absolute;
        border: 4px solid #cecece;
        border-top: 4px solid #1E90FF;
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }
    .left-side {
        clip: rect(0, 50px, 100px, 0);
    }
    .right-side {
        clip: rect(0, 100px, 100px, 50px);
        animation: loading-1 1s linear forwards;
    }
    .bar {
        position: absolute;
        border: 4px solid #1E90FF;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        clip: rect(0, 50px, 100px, 0);
        animation: loading-2 1s linear forwards;
    }
    .progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        color: #333;
    }
    @keyframes loading-1 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(180deg);
        }
    }
    @keyframes loading-2 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(180deg);
        }
    }
    .pie{
        border-radius: 50%;
        box-shadow: 0 0 0 5px rgba(16, 26, 60, 0.1) inset;
        margin: 0px auto;
    }

此處使用到了clip屬性，控制了左右兩個元素呈現出圓弧狀，實現了圓環進度條的效果。同時，通過對佔比的修改，可以實現不同的進度展示。

三、CSS圓形進度條中間顯示百分比

在許多情況下，圓形進度條大小過小，直接在圖形上面顯示進度文本會顯得十分擁擠。因此，我們可以將進度文本調整至圓形進度條中心位置，方便顯示、美觀大方。如下所示：

    <div id="percent"></div>

    <svg viewBox="0 0 32 32" class="circle">
        <circle class="progress-meter" cx="16" cy="16" r="15.9155" fill="none" stroke-width="1.8" />
        <circle class="progress-value" cx="16" cy="16" r="15.9155" fill="none" stroke-width="1.8" />
    </svg>

    .circle {
        width: 200px;
        height: 200px;
        transform: rotate(-90deg);
        display: block;
        margin: 0 auto;
        fill: transparent;
    }

    .progress-meter {
        stroke: #d2d3d4;
    }

    .progress-value {
        stroke: #1E90FF;
        stroke-linecap: round;
        stroke-dasharray: 0, 100;
        animation: progress 3s linear forwards;
    }

    #percent {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #444;
        font-size: 40px;
    }

    @keyframes progress {
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 75, 100;
        }
    }

通過將圓形進度條與文本分離計算，並通過CSS樣式進行組合，實現圓形進度條與文本視覺上的分開，同時，進度條使用stroke-dasharray屬性，控制了進度的呈現，而動畫效果則通過CSS的keyframes來實現。

四、圓形進度條

圓形進度條可謂是圓形進度條中的代表，其放射狀的效果、簡單易上手的實現方式，受到了廣泛的推崇。如下所示：

    <div class="progress">
        <div class="progress-circle">
            <div class="progress-left"></div>
            <div class="progress-right">
                <div class="progress-bar"><p>50</p></div>
            </div>
        </div>
        <div class="progress-circle">
            <p class="progress-text">50%</p>
        </div>
    </div>

    .progress {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .progress-circle {
        width: 100px;
        height: 100px;
        position: relative;
        float: left;
        margin-right: 20px;
    }
    .progress-circle .progress-text {
        font-size: 22px;
        color: #333;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .progress-circle .progress-left, .progress-circle .progress-right {
        transform: rotate(-50deg);
        clip: rect(0, 55px, 110px, 0);
        animation: loading-1 1s linear forwards;
    }
    .progress-circle .progress-bar {
        position: absolute;
        transform: rotate(130deg);
        clip: rect(0, 55px, 110px, 0);
        animation: loading-2 1s linear forwards;
    }
    .progress-circle .progress-left {
        position: absolute;
        border: 5px solid #ccc;
        border-radius: 50%;
    }
    .progress-circle .progress-right {
        position: absolute;
        border: 5px solid #1E90FF;
        border-radius: 50%;
    }
    .progress-circle .progress-bar p {
        color: #1E90FF;
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        font-size: 36px;
        font-family: Arial;
    }
    @keyframes loading-1 {
        0% {
            transform: rotate(-50deg);
        }
        100% {
            transform: rotate(130deg);
        }
    }
    @keyframes loading-2 {
        0% {
            transform: rotate(130deg);
        }
        100% {
            transform: rotate(210deg);
        }
    }

通過clip屬性控制CSS圖形呈現的圓心大小，進而實現圓形進度條的效果。

五、CSS圓形載入進度條

圓形載入進度條可以更加形象地呈現出當前頁面或者應用正在載入的狀態，增強了用戶交互體驗。如下代碼所示：

<div class="circle">

<div class="loader">

<div class="loader"&gt
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/243324.html