General guidelines
Use the progress bar to let users know the status of an ongoing action by showing actual progress of the action and how much percentage remains until its completion. They increase user satisfaction and engagement.
Always present the status via a bar and also with a numerical percentage.
It is possible to pass by these constraints only if the load is very fast.
Consider including a label to add context.
Do not use unclear terms, use simple but meaningful words instead.
Indicate the progress of each activity if there are several. Let the user cancel a process.
Don’t only show the overall progress, especially if it is long.
Prefer a loader for the full page loading. The progress bar must always be linked to the completion of a user’s action (validation workflow, the status of a form, etc.).
Do not use the progress bar for loading a page or contents, prefer a loader.
In this case, opt for the stepper element.
Do not use the progress bar to represent the various stages of an action to perform. In this case, opt for the stepper element.
Visual guidelines
Use the different colors to guide the user on the progress of the task.
- If everything is going as planned use the primary blue.
- If the task is successfully completed use green.
- If an error occurs use red.
- If you need to warn the user use yellow.
Code & Design assets
Request code and design assets for creating user interfaces.
