加载的圆形动画效果,可以理解从一条线分成一百份变成一个圆,进一步改的话可以把加载的进度用数字表示出来
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);