CSS
body {
background: #2196F3;
}
.preload {
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}
.loading_1,
.loading_2,
.loading_3 {
position: absolute;
background: transparent;
border-radius: 50%;
border: 2px #fff solid;
}
.loading_1:after,
.loading_2:after,
.loading_3:after {
content: "";
position: absolute;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(255,255,255,0.6);
animation: rotate 3s infinite linear;
}
.loading_1 {
width: 150px;
height: 150px;
animation: rotate 3s infinite linear;
}
.loading_1:after {
background: #fff;
width: 22px;
height: 22px;
margin: 10px 0 0 12px;
}
.loading_2 {
width: 100px;
height: 100px;
margin: 25px;
animation: rotate 2.5s infinite linear;
}
.loading_2:after {
background: #fff;
width: 24px;
height: 24px;
margin: 37px 0 0 -11px;
}
.loading_3 {
width: 50px;
height: 50px;
margin: 50px;
animation: rotate 2s infinite linear;
}
.loading_3:after {
background: #fff;
width: 20px;
height: 20px;
margin: 13px 0 0 40px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
