Behavior comparison
Choose Progress bar for: Uploading a file with reliable byte progress. Choose Spinner for: A short operation has no meaningful completion value.
| 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 | native progress element | status text with aria-busy on the updated region |
| 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. |