style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display:flex;
    height:100vh;
    align-items: center;
    justify-content: center;
    background: #eef5fe;
    box-shadow: 0 5px 0 rgb(0, 0, 0.1);
    
}
.wrapper{
    display:flex;
    column-gap: 10px;
}
.wrapper .dot{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #008ef0;
    animation: animate 1s ease-in-out infinite alternate;
}
.dot:nth-child(1){
    animation-delay: 0.25s;
}
.dot:nth-child(2){
    background: #ffff00;
    animation-delay: 5s;
}
.dot:nth-child(3){
    background: #ff0000;
    animation-delay: 0.75s;
}
.dot:nth-child(4){
    background: #008000;
    animation-delay: 1s;
}
@keyframes animate {
    0%{
        transform: translateY(-10px);
    }
    100%{
        transform: translateY(5px);
    }
}