js进度条

第一步
//====================
.wrap,.circle,.percent{  
                position: absolute;  
                width: 200px;  
                height: 200px;  
                border-radius: 50%;  
            }  
            .wrap{  
                top:50px;  
                left:50px;  
                  
            }  
            .circle{  
                box-sizing: border-box;  
                border:20px solid #ccc;  
                clip:rect(0,200px,200px,100px);  
            }  
            .clip-auto{  
                clip:rect(auto, auto, auto, auto);  
            }  
            .percent{  
                box-sizing: border-box;  
                top:-20px;  
                left:-20px;  
            }  
            .left{  
                transition:transform ease;  
                border:20px solid blue;  
                clip: rect(0,100px,200px,0);  
            }  
            .right{  
                border:20px solid blue;  
                clip: rect(0,200px,200px,100px);  
            }  
            .wth0{  
                width:0;  
            }  
            .num{  
                position: absolute;  
                box-sizing: border-box;  
                width: 160px;  
                height: 160px;  
                line-height: 160px;  
                text-align: center;  
                font-size: 40px;  
                left: 20px;  
                top: 20px;  
                border-radius: 50%;  
                  
                z-index: 1;  
            }

第二步
//===============
<div class="wrap">  
            <div class="circle">  
                <div class="percent left"></div>  
                <div class="percent right wth0"></div>  
            </div>  
            <div class="num"><span>0</span>%</div>  
        </div>

第三步
//===============

<script>  
    var percent=0;  
    var loading=setInterval(function(){  
        if(percent>100){  
            percent=0;  
            $('.circle').removeClass('clip-auto');  
            $('.right').addClass('wth0');  
        }else if(percent>50){  
            $('.circle').addClass('clip-auto');  
            $('.right').removeClass('wth0');  
        }  
        $('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");  
        $('.num>span').text(percent);  
        percent++;  
    },200);  
</script>