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 indicator is an element that provides feedback about the completion level of a task or an ongoing operation.


Use the progress indicator to present the status of an ongoing action by showing actual progress of the action and how much time remains until its completion. 


Best Practices

- Always present the status via a shape being filled up, but also with a numerical percentage.

- Choosing between the linear or circular version is an esthetic choice linked to the available space in the interface.

- The progress indicator 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 indicator for loading a page or contents. Rather, opt for the Loading element. 

- Do not use the progress indicator to represent the various stages of an action to perform. In this case, opt for the Stepper element. As for the progress indicator, it will allow you to represent the progress in a more global manner (in a synthetic card, for example, if the action is completed asynchronously).



The progress indicator must be placed so as to immediately create a link to the action whose level of completion it is supposed to represent.

Progress Indicator


Two types of progress bars exist, circular and linear. The parts that fill in are always taken from the palette of primary colors.



The percentages and the fill color vary at the same time.

Back to top