.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 410px;
}

.loader ul {
    display: flex;
}

.loader ul li {
    width: 20px;
    height: 20px;
    margin: 10px;
    list-style-type: none;
    transition: 0.5s all ease;
}

.loader ul li:nth-child(1) {
    animation: right-1 1s infinite alternate;
    background-color: #e4e8e9;
    animation-delay: 100ms;
}

@keyframes right-1 {
    0% {
        transform: translateY(-60px);
    }
    100% {
        transform: translateY(60px);
    }
}

.loader ul li:nth-child(2) {
    animation: right-2 1s infinite alternate;
    background-color: #dee2e3;
    animation-delay: 200ms;
}

@keyframes right-2 {
    0% {
        transform: translateY(-70px);
    }
    100% {
        transform: translateY(70px);
    }
}

.loader ul li:nth-child(3) {
    animation: right-3 1s infinite alternate;
    background-color: #d1d6d7;
    animation-delay: 300ms;
}

@keyframes right-3 {
    0% {
        transform: translateY(-80px);
    }
    100% {
        transform: translateY(80px);
    }
}

.loader ul li:nth-child(4) {
    animation: right-4 1s infinite alternate;
    background-color: #c2c8c9;
    animation-delay: 400ms;
}

@keyframes right-4 {
    0% {
        transform: translateY(-90px);
    }
    100% {
        transform: translateY(90px);
    }
}

.loader ul li:nth-child(5) {
    animation: right-5 1s infinite alternate;
    background-color: #b5bbbd;
    animation-delay: 500ms;
}

@keyframes right-5 {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(100px);
    }
}