frutjam/dist/components/progress.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.progress{--radius-progress:calc(var(--border-radius)*2);--color-progress:var(--color-base-active);--color-on-progress:var(--color-base-soft);border:none;border-radius:var(--radius-progress);position:relative;height:calc(var(--spacing)*2);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;background-color:var(--color-on-progress);color:var(--color-progress);&:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1%,currentColor 10%,#0000 0,#0000 90%);background-size:200%;background-position-x:15%;@media (prefers-reduced-motion:no-preference){animation:progress 5s ease-in-out infinite}@supports (-moz-appearance:none){&::-moz-progress-bar{background-color:transparent;@media (prefers-reduced-motion:no-preference){animation:progress 5s ease-in-out infinite;background-image:repeating-linear-gradient(90deg,currentColor -1%,currentColor 10%,#0000 0,#0000 90%);background-size:200%;background-position-x:15%}}}}@supports (-moz-appearance:none){&::-moz-progress-bar{border-radius:var(--radius-progress);background-color:currentcolor}}@supports (-webkit-appearance:none){&::-webkit-progress-bar{border-radius:var(--radius-progress);background-color:transparent}&::-webkit-progress-value{border-radius:var(--radius-progress);background-color:currentColor}}}.progress-primary{--color-progress:var(--color-primary);--color-on-progress:var(--color-on-primary)}.progress-accent{--color-progress:var(--color-accent)}.progress-error{--color-progress:var(--color-error)}.progress-info{--color-progress:var(--color-info)}.progress-neutral{--color-progress:var(--color-neutral)}.progress-secondary{--color-progress:var(--color-secondary)}.progress-success{--color-progress:var(--color-success)}.progress-warning{--color-progress:var(--color-warning)}@keyframes progress{50%{background-position-x:-115%}}