Progress

Progress communicates how much of a task is complete. Use it for uploads, setup flows, storage limits and other operations where the user benefits from knowing the current state. For activity without a measurable completion value, use indeterminate or the Spinner component.

Linear and circular variantsCopy Anchor Link

The default variant="bar" renders a full-width horizontal track. variant="circle" renders a compact circular indicator.

<Progress value={68} label="Uploading files" showValue />
<Progress variant="circle" value={3} min={0} max={5} label="3 of 5" />

For a circular progress indicator, the current label is rendered inside the ring. If label is provided and labelPosition is not inside, that label is also rendered below the ring. Use labelPosition="inside" when the label should only appear inside the circle.

Values and rangesCopy Anchor Link

value is clamped to the inclusive min and max range. By default the range is 0..100 and the visible value is a percentage. Use valueFormatter for domain-specific values.

<Progress value={63} min={10} max={90} label="Storage used" valueFormatter={(value, percentage) => `${value} GB (${percentage}%)`} />

valueFormatter receives the bounded numeric value and the calculated percentage. Its result is used wherever the component displays a value. When showValue is enabled without a custom label, the formatted value becomes the visible status text.

Indeterminate and visual optionsCopy Anchor Link

Set indeterminate when the total duration or amount is unknown. tone uses the theme tokens. striped adds a stripe texture, and animated moves the stripes. labelPosition accepts above, below or inside for linear progress, while labelAlign controls the horizontal alignment of labels above or below the track. Use labelAlign="progress" to place the label at the end of the filled portion instead of the center or edge of the whole track. size changes the bar height or circle diameter; thickness controls the stroke/track thickness, including the circular progress ring.

<Progress indeterminate tone="secondary" label="Preparing data" />
<Progress value={42} tone="success" striped animated label="Project setup" showValue />
<Progress value={75} labelPosition="above" labelAlign="progress" label="75% complete" />

ThicknessCopy Anchor Link

For both linear tracks and circular rings, thickness is measured in pixels. Its default is 8. Values below 2 are normalized to 2.

<Progress variant="circle" value={25} thickness={4} label="4px" />
<Progress variant="circle" value={80} thickness={10} size="lg" label="10px" />
<Progress variant="circle" value={3} min={0} max={5} label="Default 8px" />
<Progress value={68} thickness={12} label="Thick bar" />

In circular indeterminate mode, the active arc rotates around the ring as a single SVG, so it remains centered while animating. The thickness prop changes the ring stroke without changing the progress value.

The same thickness prop controls the height of a linear progress track:

<Progress value={68} thickness={4} label="Thin — 4px" />
<Progress value={68} thickness={8} label="Default — 8px" />
<Progress value={68} thickness={16} label="Double — 16px" tone="success" />

This lets a linear progress bar be made more compact or roughly twice as thick as the default without changing its value, range or animation behavior. Values below 2 use the minimum effective thickness of 2px.

AccessibilityCopy Anchor Link

The component uses role="progressbar", exposes aria-valuemin, aria-valuemax and aria-valuenow for determinate progress, and uses aria-busy while incomplete. Give the component a visible label or an aria-label when it is used without text.

API ReferenceCopy Anchor Link

For a live implementation of every Progress mode, see the Progress component showcase.