css3加载动画--动态圆形展示加载进度条

加载的圆形动画效果，可以理解从一条线分成一百份变成一个圆，进一步改的话可以把加载的进度用数字表示出来

html部分：(也是醉了，贴代码总是不显示，只能上截图了)

css3部分：

*{margin: 0;padding: 0;}

.wrap,.circle,.percent{

position: absolute;

width: 200px;

height: 200px;

border-radius: 50%;

}

.circle{

box-sizing: border-box;

clip:rect(0,200px,200px,100px);

-webkit-transform:rotate(270deg);  

}

.clip-auto{clip:rect(auto, auto, auto, auto);}

.percent{box-sizing: border-box;}

.left{

transition:transform ease;

width: 200px;

height: 200px;

background: blue;

clip: rect(0,100px,200px,0);

}

.right{

width: 200px;

height: 200px;

background: blue;

clip: rect(0,200px,200px,100px);

}

.wth0{width:0;}

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

percent++;

},10);