SCSS
html,body{
height : 100%;
}
body{
background : crimson;
display: flex;
justify-content : center;
align-items : center;
.loader{
height : 10px;
margin : 0 10px;
width : 10px;
border-radius : 50%;
background : #000;
position : relative;
animation : loading 1s ease-in infinite;
&:after{
position : absolute;
content : "";
width : 10px;
height : 4px;
background : #585755;
bottom : -20px;
border-radius : 50%;
}
}
}
@keyframes loading{
0%{
transform : translateX(0);
}
20%{
transform : translateX(10px);
}
40%{
transform : translateX(60px);
}
60%{
transform : translateX(-10px);
}
80%{
transform : translateX(-60px);
}
100%{
transform : translateX(0);
}
}
