#overLazy{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 180px;
margin: auto;
align-content: center;
position: fixed;
height: 100%;
top: 0;
left: calc(50% - 90px);
}
[class*="loadding-"]{
display: inline-block;
width: 1.8em;
height: 1.8em;
color:inherit;
vertical-align: middle;
pointer-events: none;
border-radius: 50%;
margin-right: 1em ;
}
[class*="loadding-"]:last-child {
margin-right: 0 ;
}
.loadding-1,
.loadding-2,
.loadding-3 {
animation-fill-mode: both;
animation: loadding-1 1.8s infinite ease-in-out;
}
.loadding-1 {
background: #8fafff;
position: relative;
opacity: .5;
animation-delay: -2.8s;
}
.loadding-2 {
right: 150%;
animation-delay: -1.4s;
opacity: .7;
background: #4982eb;
}
.loadding-3 {
left: 150%;
background: #0d5ada;
}
@keyframes loadding-1 {
0%,
100% {
transform: scale(1);
opacity: .8;
}
50% {
transform: scale(1.25);
opacity: 1;
}
}