jquery css 圆形百分比图 圆形进度图

预览：

实现方法：

1，html

<div class="fatherdiv">
                            <div class="persentdiv">
                                <div class="persentleft"></div>
                                <div class="persentright wth0"></div>
                            </div>
                            <div class="num">
                                0%
                            </div>
                        </div>

2，css

/* 圆形进度条 */

.fatherdiv{
    width: 150px;
    height: 150px;
    position: relative;
    background-color: #f3f3f3;
    border-radius: 50%;
}
.persentdiv {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    clip: rect(0, 150px, 150px, 75px);
}

.persentleft {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 10px solid #1890ff;
    box-sizing: border-box;
    border-radius: 50%;
    clip: rect(0, 75px, 150px, 0);
}

.persentright {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 10px solid #1890ff;
    box-sizing: border-box;
    border-radius: 50%;
    clip: rect(0, 150px, 150px, 75px);
}

.wth0 {
    width: 0;
}

.num {
    position: absolute;
    box-sizing: border-box;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    font-size: 32px;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    background-color: #fff;
    color: #1890ff;
    z-index: 1;
}
.clip-auto {
    clip: rect(auto, auto, auto, auto);
}

3，用jq控制

// 渲染百分比
       function percent(percent) {
            if (percent > 100) {
                percent = 0;
                $('.persentdiv').removeClass('clip-auto');
                $('.persentright').addClass('wth0');
            } else if (percent > 50) {
                $('.persentdiv').addClass('clip-auto');
                $('.persentright').removeClass('wth0');
            }
            $('.persentleft').css("transform", "rotate(" + 3.6 * percent + "deg)");
            $('.num').text(percent + "%");
        }

4,调用

percent(60)