Progress indicators
Introduction
Before a user undertakes a task, it’s important to show them how many steps we will ask them to go through and display where they are in this journey. Similalry, if they are waitig for an update from us, before they can perform a certain action, then we need to indicate that something is happening in the background.
We have three solutions to displaying progress: A step-by-step progress bar with labels, a condensed progress bar and a progress button.
Progress bar with labels
Keep the labels consistent, but concise so the user can undetsand where they are and what is coming next. This type of progress indicator has three states:
- Completed
- Current
- Next
Background: #00D659
Label: Rubik Regular 14px #3C3E49
Border: 2px #3C3E49
Label: Rubik Medium 14px #3C3E49
Border: 2px #DFE0E6
Label: Rubik Regular 14px #3C3E49
Condensed progress bar
Use this type in modals or where there is less space and no reason to use labels. This type of progress indicator has three states:
- Completed
- Current
- Next
24 px dot #6200EA
28px dot #6200EA
Text: Rubik Medium 16px #FFFFFF
12px dot #D0D2DA
Progress button
The progress button is based on the default solid button. It has three states:
- Disabled
- In progress
- Enabled
Background: #6D9D9D9 Text: Rubik Medium 16px #FFFFFF
Background: #6D9D9D9 Text: Rubik Medium 16px #FFFFFF
Progress bar Background: #00D659 Text: Rubik Medium 14px #3C3E49
Background: #00D659 Text: Rubik Medium 16px #3C3E49