Progress Bar

A determinate indicator showing how much of a known task is done — usable only when the total is actually known.

UI Components

A 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 )

Related terms

All terms

Defined by Mara Bureau LLP. Last reviewed . Corrections: hello@mara.ink.

( You may ask )

Questions about Progress Bar

Didn’t find your answer?

Ask us directly — a designer replies within one business day.

Contact us
  • 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.

  • 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.

( Contact )

What problems are we solving?

At our core, we believe in delivering high-quality designs in days, not weeks.

What do you need?

( Contact )

What problems are we solving?

At our core, we believe in delivering high-quality designs in days, not weeks.

What do you need?