css + jq 实现环形进度条

在大圆中画两个半圆遮盖，使用半圆的旋转来实现显示进度条

<div class="circle">
   <div class="circle_left">
      <div class="cir-left"></div>
    </div>
    <div class="circle_right">
       <div class="cir-right"></div>
     </div>
    <!-- 内容层 -->
    <div class="circle-content">
                                
     </div>
 </div>

.circle {
        font-size: 120px;
        width: 1em;
        height: 1em;
        position: absolute;
        border-radius: 50%;
        background: #3c3942;
        left: 50%;
        transform: translateX(-50%);
    }

    .circle_left,
    .circle_right,
    .cir-left,
    .cir-right {
        width: 1em;
        height: 1em;
        position: absolute;
        top: 0;
        left: 0;
    }

    .cir-left,
    .cir-right {
        border-radius: 50%;
        background: #fdbe19;
    }

    .circle_right,
    .cir-right {
        clip: rect(0, auto, auto, .5em);
    }

    .circle_left,
    .cir-left {
        clip: rect(0, .5em, auto, 0);
    }

    .circle-time-box {
        width: .9em;
        height: .9em;
        background-color: #1b1a1e;
        text-align: center;
    }

根据倒计时显示

var time = 30;
                var totaltime = 0;
                var totaldeg;
                var sdeg = (360 / time).toFixed(2);
                //显示的倒计时
                $("#lastTime").html(time);
                var mytimer = setInterval(function () {
                    time--;
                    totaltime++;
                    totaldeg = totaltime * sdeg;
                    if (totaldeg <= 180) {
                        $('.cir-right').css('transform', "rotate(" + totaldeg + "deg)");
                    } else {
                        $('.cir-right').css('transform', "rotate(180deg)");
                        $('.cir-left').css('transform', "rotate(" + (totaldeg - 180) + "deg)");
                    };
                    $("#lastTime").html(time);
                    if (time < 1) {
                        clearInterval(mytimer);
         
                    }
                }, 1000)