.progress-bar{
    width: 100%;
    height: 10px;
    background-color: var(--c--contextuals--background--semantic--neutral--secondary);
        background-image: linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.25) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.25) 75%,
            transparent 75%,
            transparent
        );
        background-size: 40px 40px;
        animation: progress-stripes 1s linear infinite;
    border-radius: 50vw;
    overflow: hidden;

    &__progress {
        height: 100%;
        transition: width 0.2s linear;
        background-color: var(--c--contextuals--background--semantic--brand--primary);
        background-image: linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        background-size: 40px 40px;
        animation: progress-stripes 1s linear infinite;
        border-radius: 50vw;
    }

    &--indeterminate {
        .progress-bar__progress {
            width: 30% !important;
            animation: progress-indeterminate 1.5s ease-in-out infinite, progress-stripes 1s linear infinite;
        }
    }
}

@keyframes progress-stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}

@keyframes progress-indeterminate {
    0% {
        margin-left: -30%;
    }
    100% {
        margin-left: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar,
    .progress-bar__progress {
        animation: none;
    }
    .progress-bar--indeterminate .progress-bar__progress {
        animation: none;
        width: 100% !important;
        margin-left: 0;
        opacity: 0.5;
    }
}
