Progress

The default Progress component renders a horizontal bar with a primary-colored indicator that fills proportionally to the Value parameter. The component uses role="progressbar" with proper ARIA attributes for screen reader support.

Multiple Progress bars at different completion levels demonstrating the smooth fill behavior. Pair each bar with a text label above it to provide context about what the percentage represents, such as file upload progress or multi-step form completion.

Set the Max parameter to define a custom maximum value instead of the default 100. This is useful for step-based progress indicators where the total is a known quantity like "3 of 5 steps" rather than a percentage.

The Progress bar animates smoothly when its Value changes via CSS transitions on the indicator width. Bind the value to a state variable and update it with button clicks or async operations to create interactive progress indicators.

Set ShowLabel to display a percentage label alongside the progress bar. Customize the format with LabelFormat — use {"{0}"} as the placeholder for the integer percentage value. Common formats include {"{0}%"}, Step {"{0}"} of 100, or {"{0}"}/100.

Use the IndicatorClass parameter to override the default primary color of the progress indicator. Apply Tailwind background utilities like bg-green-500, bg-amber-500, or gradient classes for semantic or branded progress bars.