CSS
html, body{
background: #111;
margin: 0;
}
.container{
width: 300px;
height: 300px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.sp{
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: rgba(0,0,0,0);
border-radius: 50%;
}
.sp1{
@extends .sp;
width: 150px;
height: 150px;
border-top: 4px solid #F44336;
animation: rotate 3s linear infinite;
}
.sp2{
@extends .sp;
width: 130px;
height: 130px;
border-top: 4px solid #03A9F4;
animation: rotate 3.428571s linear infinite;
}
.sp3{
@extends .sp;
width: 110px;
height: 110px;
border-top: 4px solid #CDDC39;
animation: rotate 4s linear infinite;
}
.sp4{
@extends .sp;
width: 90px;
height: 90px;
border-top: 4px solid #795548;
animation: rotate 4.8s linear infinite;
}
.sp5{
@extends .sp;
width: 70px;
height: 70px;
border-top: 4px solid #607D8B;
animation: rotate 6s linear infinite;
}
.sp6{
@extends .sp;
width: 50px;
height: 50px;
border-top: 4px solid #FAFAFA;
animation: rotate 8s linear infinite;
}
@keyframes rotate{
to{
transform: rotateZ(360deg);
}
}
