Behavior comparison

Progress bar vs Spinner

Choose Progress bar for: Uploading a file with reliable byte progress. Choose Spinner for: A short operation has no meaningful completion value.

Decision

Family question

Is duration unknown, measurable, or should the content shape be preserved?

Rule for this pair

Choose Progress bar when Progress bar represents completion over a task and exposes a measured value when available; Spinner is a compact busy indicator, while Skeleton represents the eventual content layout. Choose Spinner when Spinner communicates an indeterminate wait; Progress bar shows measurable completion, while Skeleton previews the shape of content still loading.

Dimension	Progress barProgress bar	SpinnerSpinner
Trigger	A measurable task begins and reports completed versus total work.	An operation with unknown remaining duration begins.
Modality	Non-modal progress status; blocking behavior belongs to the surrounding task, not the bar.	Non-modal status indicator unless the surrounding workflow independently blocks interaction.
Placement	Adjacent to the task, file, or step whose progress it represents.	Close to the affected region or control without replacing unrelated content.
Interactivity	Usually read-only; its value and label update as measurable work completes.	Not interactive; an accessible status communicates that work is still in progress.
Focus	The progress indicator does not receive focus; focus remains on the operation controls or current task.	Focus remains on the initiating control unless a documented transition replaces the whole view.
Dismissal	It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.	The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself.
Accessible role	progress	status + [aria-busy=true]
Use case	Uploading a file with reliable byte progress	A short operation has no meaningful completion value
Mobile behavior	Use the available width and keep the label or numeric value readable without tiny overlays.	Reserve stable space and pair the indicator with concise status text when waiting is noticeable.

Try Progress bar Try Spinner

Dimension

Progress barProgress bar

SpinnerSpinner

Trigger

A measurable task begins and reports completed versus total work.

An operation with unknown remaining duration begins.

Modality

Non-modal progress status; blocking behavior belongs to the surrounding task, not the bar.

Non-modal status indicator unless the surrounding workflow independently blocks interaction.

Placement

Adjacent to the task, file, or step whose progress it represents.

Close to the affected region or control without replacing unrelated content.

Interactivity

Usually read-only; its value and label update as measurable work completes.

Not interactive; an accessible status communicates that work is still in progress.

Focus

The progress indicator does not receive focus; focus remains on the operation controls or current task.

Focus remains on the initiating control unless a documented transition replaces the whole view.

Dismissal

It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.

The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself.

Accessible role

progress

status + [aria-busy=true]

Use case

Uploading a file with reliable byte progress

A short operation has no meaningful completion value

Mobile behavior

Use the available width and keep the label or numeric value readable without tiny overlays.

Reserve stable space and pair the indicator with concise status text when waiting is noticeable.