.loader-wrapper-staggered {
    display: flex;
    justify-content: center;
}

.loader-container.loader-staggered {
    --background-color: transparent;
    height: var(--block-size);
    width: 100%;
    background-color: var(--background-color);
    position: relative;
}

.loader-staggered .loader {
    --color1: #7ef9ff;
    --color2: #89cff0;
    --color3: #4682b4;
    --color4: #0f52ba;
    --color5: #000080;
    display: flex;
}
.loader-staggered .loader .dot {
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.8em;
    border-radius: 50%;
}
.loader-staggered .loader .dot::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background: inherit;
     border-radius: inherit;
     animation: wave 2s ease-out infinite;
 }

.loader-staggered .loader .dot:nth-child(1) {
    background: var(--color1);
}
.loader-staggered .loader .dot:nth-child(1):before {
    animation-delay: calc(1 * 0.2s);
}
.loader-staggered .loader .dot:nth-child(2) {
    background: var(--color2);
}
.loader-staggered .loader .dot:nth-child(2):before {
    animation-delay: calc(2 * 0.2s);
}
.loader-staggered .loader .dot:nth-child(3) {
    background: var(--color3);
}
.loader-staggered .loader .dot:nth-child(3):before {
    animation-delay: calc(3 * 0.2s);
}
.loader-staggered .loader .dot:nth-child(4) {
    background: var(--color4);
}
.loader-staggered .loader .dot:nth-child(4):before {
    animation-delay: calc(4 * 0.2s);
}
.loader-staggered .loader .dot:nth-child(5) {
    background: var(--color5);
}
.loader-staggered .loader .dot:nth-child(5):before {
    animation-delay: calc(5 * 0.2s);
}

@keyframes wave {
    50%, 75% {
        transform: scale(2.5);
    }

    80%, 100% {
        opacity: 0;
    }
}