Progress Bar
A determinate indicator showing how much of a known task is done — usable only when the total is actually known.
UI ComponentsA progress bar makes a claim: this task has a measurable end and we are this far from it. When the claim is true — uploads, exports, batch operations, multi-step flows — it reduces the perceived wait and stops people cancelling. When it is not, you have shipped a loading spinner that lies, and a bar that sits at 90% for a minute damages trust more than no bar at all.
Multi-phase operations need honesty about phase. An upload that transfers, then processes, then indexes should say which phase it is in rather than mapping all three onto one smooth line. If a remaining-time estimate is shown it must be based on observed throughput and allowed to increase; an estimate that only counts down is a countdown, not an estimate.
In practice
A video tool showed a single bar covering upload and transcoding. Transcoding took four times as long as upload, so the bar raced to 25% and crawled. Support saw repeated “stuck at 25%” reports. Splitting it into two labelled phases eliminated them without making anything faster.
Where teams get it wrong
- A determinate bar for an operation whose total is unknown.
- Progress that jumps or moves backwards.
- One bar covering phases with very different durations.
- Bars that reach 100% before the task is usable.
- Time estimates that only ever decrease.
Learn more
You may ask
Frequently Asked Questions
When should you use a progress bar instead of a spinner?
When you can measure how much of the task is done. If the total is unknown, a spinner or a skeleton is more honest than a bar that invents its own position.
Should progress bars show estimated time remaining?
Only if the estimate comes from observed throughput and is allowed to go up. An estimate that only counts down is a countdown, and people notice when it stalls.
Related terms
All terms- Loading SpinnerAn indeterminate progress indicator shown while a system is working and cannot say how long it will take.
- Skeleton LoadingPlaceholder shapes matching the layout of content that is still loading, shown instead of a spinner so the page keeps its structure.
- File UploadThe control for getting a file from a person's machine into a product — and the place where most products lose the work silently.
- Stepper (UI)A control that breaks a task into ordered steps and shows where somebody is in the sequence.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us