vue2 css 简单圆形进度条

超级简单的一个小圆形进度条，主要是利用两个半圆+ border + 旋转，样式十分简单。

打个底，有什么需要改的再次基础上再做修改~

效果图

组件部分

模板：

<template>
    <view class="circle-box" key="key"
    :style="{'--activecolor': activeColor,'--inactivecolor': inActiveColor,'--leftRotate':leftRotate+'deg','--rightRotate':rightRotate+'deg'}">
            <view class="circle left">
                 <view class="circle-sub" :style="'border-width: '+ borderWidth +';-webkit-transform: rotate('+ leftRotate +'deg);'"></view>  
            </view>
            <view class="circle right">
                 <view class="circle-sub" :style="'border-width: '+ borderWidth +';-webkit-transform: rotate('+ rightRotate +'deg);'"></view>  
            </view>
            <view class="circle-text">
                <view v-if="showRate" class="circle-num">{{ rate.toFixed(2) }} %</view>
                <view v-if="content" class="circle-num">{{ content }}</view>
                <view v-if="tip">{{ tip }}</view>
                <slot></slot>
            </view>
        </view>
    </view>
</template>

js部分

    export default {
        name:"circleProgress",
        props: {
            rate: {
                type: Number,
                default: 0
            },
            showRate: {
                type: Boolean,
                default: false
            },
            activeColor: {
                type: String,
                default: '#3c9cff'
            },
            inActiveColor: {
                type: String,
                default: '#eeeeee'
            },
            borderWidth: {
                type: String,
                default: '10px'
            },
            content: {
                type: String,
                default: ''
            },
            tip: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                refresh: true
            };
        },
        computed: {
            key(){
                return this.rate + Math.random() * 100
            },
            rightRotate() {
                if(this.rate <= 50) {
                    return 45 + this.rate * 3.6
                } else {
                    return 225
                }
            },
            leftRotate() {
                if(this.rate > 50) {
                    return 45 + (this.rate - 50) * 3.6
                } else {
                    return 45
                }
            },
        },
    }

css部分

.circle-box{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}

.circle{
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    overflow:hidden;
    top: 0;
}

.left{
    left: 0;
}

.right{
    right: 1px;
}

.circle > .circle-sub{
    width: 200%;   
    height: 100%;   
    border:10px solid transparent;   
    border-radius: 50%;   
    box-sizing: border-box;
    position: absolute;   
    top:0;  
    z-index: 3;
}

.right .circle-sub{   
    border-top:10px solid var(--inactivecolor);   
    border-right:10px solid var(--inactivecolor);  
    border-left:10px solid var(--activecolor);   
    border-bottom:10px solid var(--activecolor);    
    right:0;
}

.left .circle-sub{   
    border-top:10px solid var(--activecolor);   
    border-right:10px solid var(--activecolor); 
    border-bottom:10px solid var(--inactivecolor);   
    border-left:10px solid var(--inactivecolor);      
    left:0;
}

.circle-text {
    font-weight: bold;
    font-size: 14rpx;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: var(--activecolor);
    padding-top: 15%;
}

.circle-num {
    font-size: 18rpx;
    padding: 3px 0;
    flex-basis: 100%;
}

引用

// 引入
import circleProgress from '@/components/circle-progress/circle-progress.vue'
...
// 组件
components: { circleProgress },

// 模板使用
<circle-progress :rate="rate">
    <template v-slot>
        <view class="circle-num">{{ doneNum }}</view>
        <view>已完成</view>
    </template>
</circle-progress>