携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

之前用的小程序的vant开发的时候，有圆环进度条组件van-circle，最近用uniapp开发，前端用的uview组件，意外发现没有这个组件，无奈只能自己用css实现一个，下面我们一起看看吧

绘制圆环进度条

<div class="circle"></div>

绘制一个半径50px，border20px的圆环

.circle {
    position: relative;
    margin: 100px auto;
    width: 100px;
    height: 100px;
    border: 20px solid #825234;
    border-radius: 50%;
}

效果如图所示，这是一个进度为0的时候的圆环，当进度不为0的时候，我们需要将圆环高亮显示。

绘制两个长方形，将圆环分为左右两部分，长方形的宽度是圆环大圈的直径的一半70px，高度是圆环大圈的直径

<div class="circle">
    <div class="bar bar-left"></div>
    <div class="bar bar-right"></div>
</div>

.bar {
    position: absolute;
    width: 70px;
    height: 140px;
    overflow: hidden;
}
.bar-left {
    top: -20px;
    left: -20px;
    background-color: #4CAF50;
    opacity: 0.6;
}

.bar-right {
    top: -20px;
    left: 50px;
    background-color: #20a2ed;
    opacity: 0.6;
}

左右两个长方形中放正方形div半径为50px，两个正方形都定位到左上角

<div class="circle">
    <div class="bar bar-left">
        <div class="bar-left-an"></div>
    </div>
    <div class="bar bar-right">
        <div  class="bar-right-an"></div>
    </div>
</div>

.bar-left-an{
    position: absolute;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-width: 20px;
    border-color: transparent transparent #FB8337 #FB8337;
    border-style: solid;
    border-radius: 50%;
    transform: rotate(-135deg);
}
.bar-right-an {
    position: absolute;
    left: -70px;
    z-index: 20;
    width: 100px;
    height: 100px;
    border-width: 20px;
    border-color: #FB8337 #FB8337 transparent transparent;
    border-style: solid;
    border-radius: 50%;
    transform: rotate(-135deg);
}

计算圆环旋转角度

let rate = 0；
if(rate > 50) {
    b_r_a.css({
        "transform": "rotate(45deg)",
        "transition": "transform 1s linear"
    });
    setTimeout(function() {
        b_l_a.css({
            "transform": "rotate(" + (((c_num-50)/100*360)-135) + "deg)",
            "transition": "transform 1s linear"
        });
    },1000);
} else {
    setTimeout(function() {
        b_r_a.css({
            "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
            "transition": "transform 1s linear"
        });
    },1000);
    b_l_a.css({
        "transform": "rotate(-135deg)",
        "transition": "transform 1s linear"
    });
}

这样就实现了一个圆环进度条了。