@wonderflow/react-components/dist/components/linear-progress/linear-progress.module.css

UI components from Wonderflow's Wanda design system

@layer components{.LinearProgress,.Progress{position:relative}.Progress{--progress-height:0.250rem;--track-color:var(--dimmed-1);--fill-color:var(--cta-default);appearance:none;background:var(--track-color);border:none;display:block;height:var(--progress-height);overflow:hidden;vertical-align:baseline;width:100%}.Progress[data-progress-dimension=big]{--progress-height:0.500rem}.Progress::-webkit-progress-bar{background-color:transparent}.Progress::-webkit-progress-value{background:var(--fill-color);-webkit-transition:width .2s cubic-bezier(0,0,.34,1);transition:width .2s cubic-bezier(0,0,.34,1)}.Progress::-moz-progress-bar{background:var(--fill-color)}.Progress:not([value])::-moz-progress-bar{background:transparent}.Progress:indeterminate{animation:progress-stripes 2s linear infinite;background-image:linear-gradient(to right,transparent 50%,var(--fill-color) 50%,var(--fill-color) 60%,transparent 60%,transparent 71.5%,var(--fill-color) 71.5%,var(--fill-color) 84%,transparent 84%);background-size:200% 100%}.Percentage{left:var(--offset);position:absolute;transform:translateX(var(--translation));transition:left .2s cubic-bezier(0,0,.34,1)}}@keyframes progress-stripes{0%{background-position:left -31.25% top 0;background-size:200% 100%}50%{background-position:left -49% top 0;background-size:800% 100%}to{background-position:left -102% top 0;background-size:400% 100%}}