jQuery+CSS实现环形进度条

HTML代码：

<div class="circle">

    <div class="pie_left"><div class="left"></div></div>

    <div class="pie_right"><div class="right"></div></div>

    <div class="mask"><span>0</span>%</div>

</div>

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)");

        };

    });

});