Progress bars are animated bars which show a rate of completion for a system task or a response to user input. They can be accompanied by a percentage of completion value.
Progress bar
We have two progress bar styles. With or without the percentage of progress visible.
User experience
Use progress bars when loading content, showing the system completing a task, or to visualise other percentage-based calculations. The two styles allow for both a subtle and more bold visual. Use appropriately depending on how much attention you wish to draw to the element.
Progress bar usage
On the surface the Progress bar component appears to be a simple way to display a user’s progress through something like an application form. However, using a percentage based element like this for form process fails on many levels for this task:
- Does not provide any confidence or information about what’s to come
- Does not provide context or orientation within the process
- Does not provide any idea of how long the process is
- Does not allow for easy navigation back to an earlier step in the process (which can sometimes be helpful for long processes)
- It is very difficult to provide a precise indication of exactly how far the user has moved through the form, as indicated by percentage
- The presence of a percentage based number indicates a precision that cannot be reflected. How is the percentage calculated? Does the bar move as each question is asked? Or as each page is completed?
GEL recommends using the Progress-Rope component to help a user move through a form with confidence. This component provides the user with a clear understanding of their orientation and the ability to move forward and backwards through the form process.
Visual design
For speed, flexibility and consistency the progress bar is designed to work on any background (light or dark) without requiring overrides to the styles. This is achieved by giving the track a border.
Dos and don’ts
- Avoid changing the styles of the progress bar.