Progress bar
/PROG-res BAR/ · noun · FEEDBACK pattern · #063
A track that fills to show how much of a job is done. Honest ones are tied to real work; the rest are just animated apologies.
You might call it
- “a loading bar”
- “the bar that fills up while something loads”
- “an upload progress bar”
- “a percentage bar”
- “the line showing how far along it is”
…its name is Progress bar.
Common questions
What is the loading bar called?
A progress bar: a horizontal bar that fills as a task such as an upload or download completes. A determinate bar shows how much is done; an indeterminate one animates when the remaining time is unknown.
Progress bar vs spinner: which should I use?
Use a progress bar when you can measure how much is done or the wait is longer than a few seconds; use a spinner for short waits of unknown length.
In code
| SwiftUI | ProgressView |
|---|---|
| UIKit | UIProgressView |
| Jetpack Compose | LinearProgressIndicator |
| Android (Views) | LinearProgressIndicator |
| Flutter | LinearProgressIndicator |
| Web (HTML / ARIA) | <progress> role="progressbar" |
Prompt for your AI coding tool
Add a progress bar for this upload: a thin horizontal bar that fills from left to right as the work completes, with the percentage or “3 of 5 files” shown next to it. Use the determinate style when progress is known and the indeterminate (animated) style only when it is not. Announce it to screen readers with its current value (a <progress> element on the web), and replace it with a clear success or error message when it finishes.
More UI words to use when vibe coding →