HTML
<div class='loader1 circle border-1'>
<div class='spinner-container-A'>
<div class='spinner-1 circle border-1'>
<div class='spinner-container-A'>
<div class='spinner-1 circle border-1'>
</div>
</div>
</div>
</div>
</div>
<div class='loader2 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-1'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader3 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-1'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader4 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-1'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-1'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader5 circle border-1'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-1'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-1'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-1'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader6 circle border-1'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-1'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-1'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-1'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader7 circle border-2'>
<div class='spinner-container-A'>
<div class='spinner-1 circle border-2'>
<div class='spinner-container-A'>
<div class='spinner-1 circle border-2'>
</div>
</div>
</div>
</div>
</div>
<div class='loader8 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-2'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader9 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-2'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader10 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-2'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-2'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader11 circle border-2'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-2'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-2'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-2'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader12 circle border-2'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-2'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-2'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-2'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader13 circle border-3'>
<div class='spinner-container-A'>
<div class='spinner-1 circle border-3'>
<div class='spinner-container-A'>
<div class='spinner-1 circle border-3'>
</div>
</div>
</div>
</div>
</div>
<div class='loader14 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-1 circle border-3'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader15 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-2 circle border-3'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader16 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-3'>
<div class='spinner-container-B'>
<div class='spinner-3 circle border-3'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader17 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-4 circle border-3'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='loader18 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-3'>
<div class='spinner-container-C'>
<div class='spinner-5 circle border-3'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body{
background-color:#63a1f4;
}
.loader1, .loader2, .loader3, .loader4, .loader5, .loader6, .loader7, .loader8, .loader9, .loader10, .loader11, .loader12,
.loader13, .loader14, .loader15, .loader16, .loader17, .loader18{
box-sizing:border-box;
width:100px;
height:100px;
position:absolute;
animation:rotation 6s infinite linear;
}
.loader1{
left:100px;
top:100px;
}
.loader2{
left:300px;
top:100px;
}
.loader3{
left:500px;
top:100px;
}
.loader4{
left:700px;
top:100px;
}
.loader5{
left:900px;
top:100px;
}
.loader6{
left:1100px;
top:100px;
}
.loader7{
left:100px;
top:300px;
}
.loader8{
left:300px;
top:300px;
}
.loader9{
left:500px;
top:300px;
}
.loader10{
left:700px;
top:300px;
}
.loader11{
left:900px;
top:300px;
}
.loader12{
left:1100px;
top:300px;
}
.loader13{
left:100px;
top:500px;
}
.loader14{
left:300px;
top:500px;
}
.loader15{
left:500px;
top:500px;
}
.loader16{
left:700px;
top:500px;
}
.loader17{
left:900px;
top:500px;
}
.loader18{
left:1100px;
top:500px;
}
.circle{
box-sizing:border-box;
border-radius:50%;
}
.border-1{
border:2px solid #fff;
}
.border-2{
border-top:2px solid #fff;
border-left:2px solid #fff;
border-bottom:2px solid transparent;
border-right:2px solid transparent;
}
.border-3{
border-top:2px solid #fff;
border-left:2px solid transparent;
border-bottom:2px solid transparent;
border-right:2px solid transparent;
}
.loader18 .border-3, .loader18{
border-bottom:2px solid #fff;
}
.spinner-container-A{
position:absolute;
width:80%;
height:80%;
left:10%;
top:10%;
animation:rotation 4s infinite linear;
}
.spinner-container-B{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
animation:rotation 4s infinite linear;
}
.spinner-container-C{
position:absolute;
width:80%;
height:80%;
left:10%;
top:10%;
}
.spinner-1{
position:absolute;
width:50%;
height:50%;
left:calc(7.32% - 1px);
top:calc(7.32% - 1px);
}
.spinner-2{
position:absolute;
width:75%;
height:75%;
left:calc(3.66% - 1px);
top:calc(3.66% - 1px);
}
.spinner-3{
position:absolute;
animation:resize 4s infinite linear;
}
.spinner-4{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
animation:resize 4s infinite linear, rotation 4s infinite linear;
}
.spinner-5{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
animation:resize2 4s infinite linear, rotation 4s infinite linear;
}
@keyframes rotation{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes resize{
0%,100%{
width:calc(100% + 4px);
height:calc(100% + 4px);
left:-2px;
top:-2px;
}
50%{
width:50%;
height:50%;
left:calc(7.32% - 1px);
top:calc(7.32% - 1px);
}
}
@keyframes resize2{
0%,100%{
width:calc(100% + 4px);
height:calc(100% + 4px);
left:-2px;
top:-2px;
}
50%{
width:50%;
height:50%;
left:25%;
top:25%;
}
}
