CSS實現(xiàn)圓環(huán)進度條

一、靜態(tài)進度條

首先，我們先看一個靜態(tài)進度條

1. 第一步當然是先實現(xiàn)一個最外層的父級圓環(huán)。
2. 其次是通過 clip-path畫出兩個半圓，并絕對定位覆蓋在父級圓環(huán)。
3. 小于50的時候，我們只需要通過旋轉(zhuǎn)右半圓，慢慢透露出父級圓環(huán)的顏色，即可達到效果。
4. 大于50的時候，我們先按照流程走前面50，再設(shè)置右半圓旋轉(zhuǎn)度數(shù)為0，修改其border顏色來實現(xiàn)前50的效果，其次再旋轉(zhuǎn)左側(cè)半圓即可達到效果。

<template>
    <div class="circle">
        <div class="circle_left ab" :style="renderLeftRate(85)"></div>
        <div class="circle_right ab" :style="renderRightRate(85)"></div>
        <div class="circle_text">
            <span class="name">成功率</span>
            <span class="value">85%</span>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'CircleProgress',
    setup() {
        const renderRightRate = (rate: number) => {
            if (rate < 50) {
                return 'transform: rotate(' + 3.6 * rate + 'deg);';
            } else {
                return 'transform: rotate(0);border-color: #54c4fd;';
            }
        };

        const renderLeftRate = (rate: number) => {
            if (rate >= 50) {
                return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
            }
        };
        return {
            renderLeftRate,
            renderRightRate,
        };
    },
};
</script>

<style lang="scss">
.circle {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    left: 200px;
    top: 50px;
    box-shadow: inset 0 0 0 5px #54c4fd;

    .ab {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    &_left {
        border: 5px solid #546063;
        border-radius: 50%;
        clip: rect(0, 40px, 80px, 0);
    }

    &_right {
        border: 5px solid #546063;
        border-radius: 50%;
        clip: rect(0, 80px, 80px, 40px);
    }

    &_text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;

        .name {
            margin-bottom: 4px;
        }
    }
}
</style>

效果如下圖：

二、動態(tài)進度條

動態(tài)的css其實和靜態(tài)的是一樣的。
該例子是寫的固定的進度，你們也可以根據(jù)自己的需求變換。

<template>
    <div class="circle">
        <div ref="circleLeft" class="circle_left ab"></div>
        <div ref="circleRight" class="circle_right ab"></div>
        <div class="circle_text">
            <span class="name">成功率</span>
            <span class="value">85%</span>
        </div>
    </div>
</template>

<script lang="ts">
import { onMounted, ref, Ref } from 'vue';
export default {
    name: 'CircleProgress',
    setup() {
        const circleLeft: Ref<HTMLElement | null | any> = ref(null);
        const circleRight: Ref<HTMLElement | null | any> = ref(null);
        let timer = 0;
        let percent = 0;

        const step = () => {
            percent += 1;

            if (percent < 50) {
                circleRight.value.style.transform = 'rotate(' + 3.6 * percent + 'deg)';
            } else {
                circleRight.value.style.transform = 'rotate(0)';
                circleRight.value.style.borderColor = '#54c4fd';
                circleLeft.value.style.transform = 'rotate(' + 3.6 * (percent - 50) + 'deg)';
            }
            if (percent < 85) {
                window.clearTimeout(timer);
                timer = window.setTimeout(step, 20);
            }
        };

        onMounted(() => {
            step();
        });

        return {
            circleLeft,
            circleRight,
        };
    },
};
</script>

效果如下：
文章來源地址http://www.zghlxwxcb.cn/news/detail-677275.html

到了這里，關(guān)于CSS實現(xiàn)圓環(huán)進度條的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！