iconiq
—Open GitHub

Progress

Motion-smoothed progress bar for determinate and indeterminate task states.

Registry sync

Smooth width animation keeps the bar and inline readout aligned as work advances.

8%

Installation

npx shadcn@latest add @iconiq/r-progress

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Registry sync

Smooth width animation keeps the bar and inline readout aligned as work advances.

8%

Indeterminate state

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

Deploy queue

Use the indeterminate motion while the job is active but the final completion amount is still unknown.

Syncing

Props

Progress

11 props

Spring-smoothed progress bar with the same Iconiq API layered over Radix UI primitives.
valuenumber | null
Default64
Current progress value. Pass null to switch into the indeterminate motion state instead of rendering a measured fill width.
minnumber
Default0
Lower bound used to normalize the fill width and the visible value text.
maxnumber
Default100
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
Defaulttrue
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.

Notes

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.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.
reducedMotionboolean
When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.