Progress

Determinate and indeterminate progress—with subtle motion.

Installation

npx shadcn@latest add @iconiq/r-progress

Indeterminate state

Pass value={null} to switch from a measured fill to the animated sweep while the final completion amount is still unknown.

Props

Progress

Spring-smoothed progress bar with the same Iconiq API layered over Radix UI primitives.

valuenumber | null

Default 64

Current progress value. Pass null to switch into the indeterminate motion state instead of rendering a measured fill width.

minnumber

Default 0

Lower bound used to normalize the fill width and the visible value text.

maxnumber

Default 100

Upper bound used to normalize the fill width and the visible value text.

labelstring

Optional title rendered above the bar and linked to the progress semantics when present.

helperstring

Optional supporting copy rendered near the label for extra task context. When omitted, the header collapses down to just the label and trailing value readout.

showValueboolean

Default true

Controls whether the trailing inline readout with the live formatted value or indeterminate label is shown.

formatValue(value: number, percent: number) => string

Optional formatter for the visible value readout. Receives the current normalized value and percent so you can render units, fractions, or custom labels.

getValueLabel(value: number, percent: number) => string

Optional formatter for screen-reader announcements when the accessible text should be more explicit than the visible readout.

indeterminateLabelstring

Default "In progress"

Text used for the visible value readout and accessible status when value is null.

ariaLabelstring

Accessible name used when no visible label is rendered. When omitted, unlabeled installs fall back to a generic Progress label.

classNamestring

Merged onto the root wrapper so you can control width, spacing, or placement in your layout.

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-progress, motion.

The component clamps numeric values into the min/max range before calculating the fill width.

The visible value readout animates from the same motion value as the fill width, so the text and the bar stay visually locked together while values change.

There is no controlled versus uncontrolled split here; value is simply rendered as the current state of the task.

Installs a Radix progress bar with the same value, min, max, label, helper, indeterminate, and formatter API as the Base UI version.

Uses the Radix progress primitive under the same spring-smoothed track fill and restrained inline readout motion shell.

Motion and semantics

Headless progress semantics from the provider primitive with a spring-smoothed fill and restrained indeterminate motion layered on top.

Built on Radix Progress.Root and Progress.Indicator while the visible fill and inline value readout stay under the same minimal Motion shell as the Base UI version.

Determinate mode uses a spring-smoothed width animation instead of a hard width jump, which keeps status updates feeling more fluid when values change rapidly.

Indeterminate mode uses one minimal left-to-right flow band with a soft fade at the start and end of each pass, so the restart stays visually quiet.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-progress, motion.

Installs a Radix progress bar with the same value, min, max, label, helper, indeterminate, and formatter API as the Base UI version.

Uses the Radix progress primitive under the same spring-smoothed track fill and restrained inline readout motion shell.

The generated registry file is /r/r-progress.json.