/* Indeterminate progress motion */
@keyframes indeterminate-1 {
    0% {
        left: -40%;
        width: 30%;
    }

    50% {
        left: 35%;
        width: 60%;
    }

    100% {
        left: 100%;
        width: 30%;
    }
}

@keyframes indeterminate-2 {
    0% {
        left: -20%;
        width: 10%;
        opacity: .0;
    }

    25% {
        opacity: .35;
    }

    50% {
        left: 30%;
        width: 20%;
        opacity: .35;
    }

    100% {
        left: 100%;
        width: 10%;
        opacity: .0;
    }
}

/* Hook them to utility-like classes */
.animate-indeterminate-1 {
    position: absolute;
    animation: indeterminate-1 1.6s ease-in-out infinite;
    height: 100%;
}

.animate-indeterminate-2 {
    position: absolute;
    animation: indeterminate-2 1.6s ease-in-out infinite .2s;
    height: 100%;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-indeterminate-1,
    .animate-indeterminate-2 {
        animation: none !important;
    }
}