jQuery/js 实现环形进度条

效果图

整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果
clip：只能在元素设置了“position:absolute”或者“position:fixed”属性时起作用 ；

---

结构

<div id="circle_1" class="circle">
    <div class="pie_left">
        <div class="left"></div>
    </div>
    <div class="pie_right">
        <div class="right"></div>
    </div>
    <div class="mask">
        <span style="margin: 0.2rem;color: #fc8238;">还需浏览39999个小时</span>
    </div>
</div>

样式

.circle { /*//这个元素可以提供进度条 */
    width: 130px;
    height: 130px;
    position: relative;
    border-radius: 50%;
}
#circle_1{
    background: #f2b237; /* //注意这是表示当前进度的颜色*/
} 
/*//这俩元素主要是为了分别生成两个半圆的，所以起作用的地方在于clip裁掉另一半 */

.pie_left,
.pie_right {
    width: 130px;
    height: 130px;
    position: absolute;
    top: 0;
    left: 0;
}
.left,
.right {
    width: 130px;
    height: 130px;
    background: #e4e3e2;  /*//注意这个是未完成进度的颜色 */
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
/* //裁掉左边一半*/

.pie_right,
.right {
    clip: rect(0, auto, auto, 65px);
}
 /* 裁掉右边一半  */
.pie_left,
.left {
    clip: rect(0, 65px, auto, 0);
}
/* mask起一个遮罩作用  ，，让进度展示像个圆环  */
.mask {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    left: 10px;
    top: 10px;
    background: #FFF;
    position: absolute;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: bold;
}

js

// 进度数值每增加1，角度增加3.6度，还要注意的是，当进度小于50%时，左侧进度条没有变化，当大于50%，左侧进度条才开始改变。
$('#circle_1').each(function(index, el) {
    var num = 86 * 3.6;  // 86 就是已经看过的进度。。总进度100
    if (num <= 180) {
        $(this).find('.right').css('transform', "rotate(" + num + "deg)");
    } else {
        $(this).find('.right').css('transform', "rotate(180deg)");
        $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
    };
});

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用