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.
Choice criteria, links and sources
- Progress barChoose Progress bar if you know a reliable value, such as bytes sent or steps completed.Open entry Progress bar
- SpinnerChoose Spinner if the operation is short and has no meaningful completion value.Open entry Spinner
See the nine dimensionsSee the sources
Wait and track progress
Try it
Is duration unknown, measurable, or should the content shape be preserved?
Progress bar
Shared trial context
A workspace waits for content or an operation to finish and communicates only the progress it can measure honestly.
Progress bar
Mission
Progress bar
Start the upload, observe a mid-progress value, cancel, restart, and reach the completed state.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The labeled progress element exposes bytes and percentage while the file transfers.
- Edge case
- If the server stops providing reliable values, the UI switches honestly to an indeterminate busy state instead of faking progress.
Spinner
Mission
Spinner
Start saving, verify duplicate activation is blocked, read the busy status, and wait for the final status.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The button exposes Saving, prevents a duplicate request, and shows a redundant animated indicator.
- Edge case
- After a long threshold, the interface adds explanatory text and a cancel or retry path instead of spinning forever.
What this example shows
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.
Which fits your need?
Progress bar
Uploading a file with reliable byte progress
Spinner
A short operation has no meaningful completion value
Difference and sources
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.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Label
The persistent text that names a control or field.
Decision
Family question
Is duration unknown, measurable, or should the content shape be preserved?
Three criteria to choose
- Use case
Progress bar
Uploading a file with reliable byte progress
Spinner
A short operation has no meaningful completion value
- Interactivity
Progress bar
Usually read-only; its value and label update as measurable work completes.
Spinner
Not interactive; an accessible status communicates that work is still in progress.
- Accessible role
Progress bar
progress
Spinner
status + [aria-busy=true]
Nine dimensions
- Trigger
Progress bar
A measurable task begins and reports completed versus total work.
Spinner
An operation with unknown remaining duration begins.
- Modality
Progress bar
Non-modal progress status; blocking behavior belongs to the surrounding task, not the bar.
Spinner
Non-modal status indicator unless the surrounding workflow independently blocks interaction.
- Placement
Progress bar
Adjacent to the task, file, or step whose progress it represents.
Spinner
Close to the affected region or control without replacing unrelated content.
- Interactivity
Progress bar
Usually read-only; its value and label update as measurable work completes.
Spinner
Not interactive; an accessible status communicates that work is still in progress.
- Focus
Progress bar
The progress indicator does not receive focus; focus remains on the operation controls or current task.
Spinner
Focus remains on the initiating control unless a documented transition replaces the whole view.
- Dismissal
Progress bar
It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.
Spinner
The indicator ends when work resolves or is cancelled; it is never a manually dismissible message by itself.
- Accessible role
Progress bar
progress
Spinner
status + [aria-busy=true]
- Use case
Progress bar
Uploading a file with reliable byte progress
Spinner
A short operation has no meaningful completion value
- Mobile behavior
Progress bar
Use the available width and keep the label or numeric value readable without tiny overlays.
Spinner
Reserve stable space and pair the indicator with concise status text when waiting is noticeable.
| 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. |