CSS实现圆环进度条

静态进度条

<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是可以正常的，但现在clip被弃用，推荐使用clip-path，但是这个属性和clip-path有些微的不同
        使用clip-path应该更改为： clip-path: inset(0 40px 0 0);
        */
        clip: rect(0, 40px, 80px, 0);
    }

    &_right {
        border: 5px solid #546063;
        border-radius: 50%;
        // 使用clip-path应该更改为： clip-path: inset(0 0 0 40px);
        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>

效果图如上，动态可根据自己业务不停改静态的值即可