Progress bars

Examples

Horizontal (Bar)

Regular

Large

Small

Extra small

Circular (Radial)

Regular

0%

Guidelines

Progress bars are visual cues to inform users that an operation is currently taking place. They also tell users that it will finish in a predictable amount of time.

They do it by showing the status of the operation and conveying how much is left to complete. For example making a deployment, creating a script etc.

When to use progress bars?

  • Use progress when the operation takes up a significant time (read as takes longer than 10 seconds)
  • and you can reliably tell users how far the task has progressed.

Note: If you are unsure, grab a UX designer or anyone from the Honeycomb team

How to use progress bars?

Add context

Make sure to show users what you are indicating progress on. This is the task that is currently taking place. For example, Creating a migration script.

Report progress on the task

Use percentage values within the circle (circular progress bar style only) to show users that the task is coming along. Progress should always be from 0% to 100% and should never decrease in value.

Your research should help inform what is the most valuable indicator of progress for this task. For example, 50%, 2 minutes left or 12GB of 100GB downloaded etc.

Allow users to cancel

Users may change their mind during this this task. Provide them a clear call to action that will allow them to cancel it without needing to wait till it finishes.

Progress bar styles

  • Horizontal (Bar)
  • Circular

Use circular progress bars when a horizontal bar wouldn't fit or would look out of place.

Code

Horizontal (Bar)

Circular (Radial)

0%