Progress displays a visual indicator of task completion, file upload progress, or any process that advances over time. It provides a flexible progress bar interface supporting both value-based and duration-based animations, with optional labels and percentage displays. Built on Radix UI's Progress component, it ensures consistent progress indicators across the interface with smooth animations and accessibility support.
Props
Name
Default
Description
value
0
Progress value from 0-100. Do not use with duration.
duration
Simulate progress bar filling up over a given duration in milliseconds (e.g., 3000). Do not use with value.
label
Optional label text displayed above or beside the progress bar.
showPercentage
false
Whether to show the percentage label alongside the progress bar.
Basic Progress
Use for simple progress indication without labels.
Value-Based Progress
Control progress using a specific value from 0 to 100.
Duration-Based Progress
Animate progress automatically over a specified duration.
The progress bar automatically fills from 0% to 100% over the specified duration (3 seconds in this example).
With Label
Add a descriptive label to explain what progress is being shown.
With Percentage
Display the percentage value alongside the progress bar.
Labeled with Percentage
Combine label and percentage for complete context.
Animated Duration Progress
Use duration-based progress for indeterminate or simulated progress.
Simulated External Progress
Update progress based on external events or data.
Multiple Progress Bars
Display multiple progress indicators together.
Low Progress
Display progress at the beginning of a process.
High Progress
Display progress near completion.
Complete Progress
Show completed state.
Meter
Meter reports a measurement in a known range, such as the share of agents available or the capacity a queue uses. It is not work moving toward completion, so it renders role="meter", not role="progressbar", and it never animates on its own. Import it from @prepared911/ui/progress.
Name
Default
Description
label
Required LocalizedMessage. The accessible name; the meter paints no text.
value
Required. Clamped to min to max; a non-finite value reads as min.
min
0
Lowest value of the range.
max
100
Highest value of the range. A reversed or empty range falls back to 0 to 100 with a development warning.
valueText
Optional LocalizedMessage exposed as aria-valuetext, for example "4 of 10 agents".
tone
MeterTone.Neutral
Neutral, Positive, Warning or Critical, painted from the status icon tokens.
size
MeterSize.Medium
Small (--space-4), Medium (--space-6) or Large (--space-8).
The meter writes its fill width itself, as a runtime CSS variable, so a caller never passes a width, style, className or as. Tone is never the only signal: keep the meaning in label, valueText or visible text beside the meter.