Progress Bar
Last Updated on Sep 29, 2022
A progress bar shows the linear completion status of a current task. It is read-only and should only be used as an approximate status of a determinate activity.

Design Principles

When to use

  • To inform users that they need to wait (it’s better to add it just in case)
    • Determinate: display a value (% or “X out of X”) when you can estimate how long the loading will take
    • Indeterminate: do not display a value when it’s impossible to estimate
  • Use a label to inform users why they need to wait or what is loading
    • Example for “why”: “Searching for coffee places…”
    • Example for “what”: “Copied 5/200 files to your drive”
  • Progress bar needs to be visible to the user (otherwise they might think the system has frozen and they’ll leave or reset)

When not to use

  • To inform users the activity involves multiple steps, use the stepper
  • DO NOT misinform users about progress time
    • Do not say “15 minutes left” when it’s highly probable that it will take another 30 min or more
    • Do not display any determinate indicator if it’s probable it will “go back in progress”

Additional Guidelines

  • If the loading time for a particular activity is long, it’s nice to give users control: add pause and/or cancel button
  • If you have an opportunity to make it fun – use it. Even fake-but-funny labels help users pass the time!
  • Adjust type and design of the progress bar to the estimated waiting time for the activity – never use an animation which takes longer than the shortest estimated waiting time

Do's and Don'ts

Use helper text if the process is complex or has a long wait time.
Use a standard message with a progress bar if one exists.
Don’t misinform users about progress time.
Don’t use if the activity involves multiple steps.
Don’t skip progress ahead if it’s probable the progression will eventually backtrack.