CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #222;
}
.dots {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
}
.dots div {
width: 20px;
height: 20px;
border: 0px solid transparent;
border-radius: 50%;
display: inline-block;
margin: 10px;
}
.dots__blue {
background-color: #48929B;
animation: 2s up-down ease infinite;
}
.dots__red {
background-color: #C3272B;
animation: 2s up-down ease infinite;
animation-delay: .25s;
}
.dots__yellow {
background-color: goldenrod;
animation: 2s up-down ease infinite;
animation-delay: .5s;
}
.dots__green {
background-color: #049372;
animation: 2s up-down ease infinite;
animation-delay: .75s;
}
@keyframes up-down {
50% {
transform: translateY(-25px);
}
}
