Behavior comparison

Progress bar vs Spinner

Decisive difference

Progress bar is a task-level completion bar and can stay indeterminate; Spinner is a compact busy indicator that only signals work is in progress.

Progress barChoose Progress bar if you know a reliable value, such as bytes sent or steps completed.
SpinnerChoose Spinner if the operation is short and has no meaningful completion value.

Decision

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

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.

Progress bar vs Spinner

Progress bar is a task-level completion bar and can stay indeterminate; Spinner is a compact busy indicator that only signals work is in progress.

Progress barChoose Progress bar if you know a reliable value, such as bytes sent or steps completed.
SpinnerChoose Spinner if the operation is short and has no meaningful completion value.

Nine dimensions

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.