Display
Progress
The rail without the interaction: a determinate or indeterminate progress bar whose tone arrives as a palette class, not a prop.
npx shadcn@latest add @fragiola/progressProgress
The track family
Progress and Slider share the track family: track.rail (the rail) and track.fill (the filled portion). The fill grows from the inline start and inverts under RTL. The indeterminate animation is a real animation and is disabled under prefers-reduced-motion via the motion-reduce: variant.
Parts
| Part | Source |
|---|---|
Root | Base UI Progress.Root |
Track | track.rail() |
Indicator | track.fill() + indeterminate animation |
Value | Base UI Progress.Value |
Label | Text.Label + field.label() |