@keyframes progress-bar-stripes {from {background-position: 1rem 0;}to {background-position: 0 0;} } .progress {display: flex;height: 1rem;overflow: hidden;font-size: 0.75rem;background-color: var(--progress-bg);border-radius: 0.1111111111rem; } .progress-bar {display: flex;flex-direction: column;justify-content: center;color: var(--progress-bar-color);text-align: center;white-space: nowrap;background-color: var(--progress-bar-bg);transition: width 0.6s ease; } @media (prefers-reduced-motion: reduce) {.progress-bar {transition: none;} } .progress-bar-striped {background-image: linear-gradient(45deg, rgba(var(--white), 0.15) 25%, transparent 25%, transparent 50%, rgba(var(--white), 0.15) 50%, rgba(var(--white), 0.15) 75%, transparent 75%, transparent);background-size: 1rem 1rem; } .progress-bar-animated {animation: progress-bar-stripes 1s linear infinite; } @media (prefers-reduced-motion: reduce) {.progress-bar-animated {animation: none;} }