#loaderContainer {
    position: fixed;
    background-color: rgba(10, 10, 10, 0.5);
    width: 100%;
    height: 100%;
    z-index: 5000;
    top: 0px;
    display: none;
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}


/* Loader circles */

.loader>span {
    background: green;
    border-radius: 50%;
    margin: 5rem 0.5rem;
    animation: bouncingLoader 0.6s infinite alternate;
}

.loader>span:nth-child(2) {
    animation-delay: 0.2s;
    background: #30D0F2;
}

.loader>span:nth-child(3) {
    animation-delay: 0.4s;
    background: #F28B30;
}


/* Define the animation called bouncingLoader. */

@keyframes bouncingLoader {
    from {
        width: 2px;
        height: 2px;
        opacity: 0.2;
        transform: translate3d(0);
    }
    to {
        width: 30px;
        height: 30px;
        opacity: 0.7;
        transform: translate3d(0, -1rem, 0);
    }
}