.outer-rotate-container {
    overflow: clip;
}

.rotate-container-0 {
    display: flex;
    width: 10px;
    height: 10px;
    transform: rotate(0deg);
}

.rotate-container-1 {
    display: flex;
    width: 10px;
    height: 10px;
    padding-top: 30px;
    transform: rotate(-15deg);
}

.rotate-container-2 {
    display: flex;
    width: 10px;
    height: 10px;
    padding-top: 30px;
    transform: rotate(-30deg);
}

.rotate-container-3 {
    display: flex;
    width: 10px;
    height: 10px;
    padding-top: 30px;
    transform: rotate(-45deg);
}

.rotate-container-4 {
    display: flex;
    width: 10px;
    height: 10px;
    padding-top: 30px;
    transform: rotate(-60deg);
}


.loop-container {
    display: flex;
}

    .loop-container span {
        display: block;
        width: 8px;
        height: 8px;
        border-bottom: 3px solid forestgreen;
        border-right: 3px solid forestgreen;
        transform: translateX(180px) rotate(135deg); /* Points the arrows left */
        animation: pulseLoop 12s infinite;
    }

        /* Staggers the animation timing for each chevron element */
        .loop-container span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .loop-container span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes pulseLoop {
    0% {
        opacity: 0;
        transform: translateX(180px) rotate(135deg);
    }

    50% {
        opacity: 0.6;
        transform: translateX(0) rotate(135deg);
    }

    55% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateX(180px) rotate(135deg);
    }
}