html
<div class="loadBox">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
less
@roundDiameter:1rem; //小圆圈直径
@outDiameter:2rem; //大圆圈直径
@roundAthleticsTime:0.2s; //旋转速度
@roundNum:5; //小圆个数
.loadBox{
z-index: 1000;
position:fixed;
width:100%;
height:100%;
background:rgba(100,100,100,0.5);
top:0;
left:0;
}
.loadBox{
ul{
.blockCenter(@roundDiameter,@roundDiameter);
li{
width:@roundDiameter;
height:@roundDiameter;
border-radius: 50%;
.positionAbsolute(0,0);
animation:mymove @roundAthleticsTime*@roundNum infinite linear ;
background: @version2-main-color;
list-style: none;
opacity: 0;
}
}
}
@keyframes mymove
{
0%{transform:rotate(0deg) translate(0px,-@outDiameter);opacity: 0.1;}
50%{transform:rotate(180deg) translate(0px,-@outDiameter);opacity: 1;}
100%{transform:rotate(360deg) translate(0px,-@outDiameter);opacity:0.1;}
}
.roundAthleticsTime(@roundAthleticsTime,@num){
animation-delay:@roundAthleticsTime*@num;
}
.loadBoxChildLi(@num) when (@num<@roundNum){
.loadBox>ul>li:nth-of-type(@{num}){
/*background:red;*/
.roundAthleticsTime(@roundAthleticsTime,@num);
}
.loadBoxChildLi((@num+1));
}
.loadBoxChildLi(1);