纯css绘制圆环进度条

<template>
    <div>


        <div class="circle">
            <div class="circle_left" :style="renderLeftRate(val)"></div>
        </div>
        <div class="ab" :style="renderRightRate(val)"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const val = ref(10)
const renderRightRate = (rate: number) => {
    if (rate < 50) {
        return 'transform: rotate(' + 360 * (rate / 100) + 'deg);height:102px; margin-top:-1px';
    } else {
        return 'transform: rotate(0);border: 8px solid #409EFF';
    }
};

const renderLeftRate = (rate: number) => {
    if (rate >= 50) {
        return 'transform: rotate(' + 360 * ((rate - 50) / 100) + 'deg); position: absolute; top: -9px; left:-9px';
    }
    else if (rate === 100) {
        return 'transform: rotate(' + 360 * ((rate - 50) / 100) + 'deg); position: absolute; top: -9px; left:-8px';
    } else {
        return 'position: absolute; top: -9px; left:-9px';
    }
};
</script>

<style lang="scss" scoped>
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    border: 8px solid #409EFF;



    .circle_left {
        width: 102px;
        height: 102px;
        background-color: #fff;
        border: 8px solid #fff;
        border-radius: 50%;
        clip-path: inset(0 50px 0 0);
    }

}

.ab {
    position: relative;
    top: -100px;
    left: -1px;
    width: 102px;
    height: 100px;
    background-color: #fff;
    border: 8px solid #fff;
    border-radius: 50%;
    clip-path: inset(0 0 0 50px);
}
</style>