SCSS
$blue: #0097FB;
body {
background-color: #2D2D30;
overflow: hidden;
}
.dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 20px;
top: 50%;
background-color: $blue;
transform: translate(0, -50%);
animation: 3s linear loader infinite;
}
.dot:nth-of-type(1) {
left: 0px;
}
.dot:nth-of-type(2) {
left: -10px;
animation-delay: 0.15s;
}
.dot:nth-of-type(3) {
left: -20px;
animation-delay: 0.3s;
}
.dot:nth-of-type(4) {
left: -30px;
animation-delay: 0.45s;
}
.dot:nth-of-type(5) {
left: -40px;
animation-delay: 0.60s;
}
@keyframes loader {
0%, 20% {
transform: translate(0, -50%);
opacity: 0;
}
35% {
transform: translate(45vw, -50%);
opacity: 1;
}
65% {
transform: translate(55vw, -50%);
opacity: 1;
}
80%, 100% {
transform: translate(100vw, -50%);
opacity: 0;
}
}
