Progress Bar

The progress bar provides feedback about an activity’s progress.

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.

Best guidelines

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.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top