Progress

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. Use for simple progress indication without labels. Control progress using a specific value from 0 to 100. 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). Add a descriptive label to explain what progress is being shown. Display the percentage value alongside the progress bar. Combine label and percentage for complete context. Use duration-based progress for indeterminate or simulated progress. Update progress based on external events or data. Display multiple progress indicators together. Display progress at the beginning of a process. Display progress near completion. Show completed state. 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. 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.