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/n/243324.html