jQuery+CSS实现环形进度条

HTML代码：

   

   

   

0%

CSS代码：

.circle {
    width: 200px;
    height: 200px; 
    position: absolute;
    border-radius: 50%;
    background: #0cc;
}
.pie_left, .pie_right {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    display: block;
    width:200px;
    height:200px;
    background:#00aacc;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(0deg);
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
    clip:rect(0,100px,auto,0);
}
.mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;
    background: #FFF;
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 16px;
}

jQuery代码：

$(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('span').text() * 3.6;
        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)");
        };
    });

});