In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

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.

ProgressBar01

Best Practices

Good practice about the use of a progress bar.

Always present the status via a bar and also with a numerical percentage.

Good practice about the use of a progress bar.

It is possible to pass by these constraints only if the load is very fast.

Good practice about the use of a progress bar.

Consider including a label to add context.

Caution to this practice with the use of a progress bar.

Do not use unclear terms, use simple but meaningful words instead.

Good practice about the use of a progress bar.

Indicate the progress of each activity if there are several. Let the user cancel a process.

Bad practice about the use of a progress bar.

Don’t only show the overall progress, especially if it is long.

Good practice of the use of a loader

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.).

Bad practice about the use of a progress bar.

Do not use the progress bar for loading a page or contents, prefer a loader.

Bad practice about the use of a progress bar.

In this case, opt for the stepper element.

Bad practice about the use of a progress bar.

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.
ProgressBar02
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