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.
Component Variants
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