.container-spinner2 {
    --size: 60px;
    --gap: calc(60px / 5);

    display: flex;
    gap: var(--gap);

    & .circle {
        --anim-delay: 0s;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        animation: undulating-circle 1s infinite;
        animation-delay: var(--anim-delay);

        &:nth-child(1) {
            --anim-delay: 0.1s;
        }
        &:nth-child(2) {
            --anim-delay: 0.2s;
        }
        &:nth-child(3) {
            --anim-delay: 0.3s;
        }
        &:nth-child(4) {
            --anim-delay: 0.4s;
        }
        &:nth-child(5) {
            --anim-delay: 0.5s;
        }
        &:nth-child(6) {
            --anim-delay: 0.6s;
        }
        &:nth-child(7) {
            --anim-delay: 0.7s;
        }
        &:nth-child(8) {
            --anim-delay: 0.8s;
        }
    }
}

.color-1 {
    background-color: #034737;
}
.color-2 {
    background-color: #0e5e4b;
}
.color-3 {
    background-color: #13745d;
}
.color-4 {
    background-color: #55917e;
}
.color-5 {
    background-color: #7cb8a4;
}
.color-6 {
    background-color: #a4e2cc;
}
.color-7 {
    background-color: #034737;
}
.color-8 {
    background-color: #0e5e4b;
}

@keyframes undulating-circle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(0, calc(60px * 2 + 10px)) scale(0.4);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}