.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
    width: 100vw;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    overflow: hidden;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle:before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
}

.circle-1 {
    background-color: #d7d8d9;
}
.circle-1:before {
    background-color: #d7d8d9;
    animation-delay: 200ms;
}

.circle-2 {
    background-color: #b7b7b8;
}
.circle-2:before {
    background-color: #b7b7b8;
    animation-delay: 400ms;
}

.circle-3 {
    background-color: #9e9fa0;
}
.circle-3:before {
    background-color: #9e9fa0;
    animation-delay: 600ms;
}

.circle-4 {
    background-color: #707172;
}
.circle-4:before {
    background-color: #707172;
    animation-delay: 800ms;
}

.circle-5 {
    background-color: #3f4040;
}
.circle-5:before {
    background-color: #3f4040;
    animation-delay: 1000ms;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%, 75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}