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 guidelines
ProgressBar02DO

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

ProgressBar02DONT

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

ProgressBar03DO

Consider including a label to add context.

ProgressBar03DONT

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

ProgressBar04DO

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

ProgressBar04DONT

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

ProgressBar05DO

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

ProgressBar05DONT

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

ProgressBar06DO

In this case, opt for the stepper element.

ProgressBar06DONT

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