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

Loading

A loading is a basic element showing the progress of an action.

General guidelines

Use a loading to show the progression of temporary state that lasts for more than one second, in which no other action is possible when :

  • Saving data.
  • Loading heavy content.
  • Loading a full page.
  •  Displaying more actions.

 

Best practices

  • Explain the actual state of the action through the title of the loading if possible (downloading, sending, calculation, etc.).
  • Use simple and concise wording.
  • Use the right loading pattern for the right context.

 

Depending on the variant, the loading can be displayed full screen with an overlay (percentage spinner in a card), but also within a component (in a button or a chart).

  • Don’t use static loadings. The loading is a dynamic component: the idea of progression should be expressed through animation.

 

A simple spinner
Spinner

The spinner is the default element for loading patterns. It may be followed by a label or be located in a container. The minimum size is 16px.

It can be used inside components like buttons, messages or data tables - or on its own. 

Choose a spinner that shows the percentage for very long downloads (more than 10 seconds).

For the spinner, there are two kind of animations:

The duration of progression is short (up to 10 seconds): the circle makes a 0.75s loop. 

The duration of progression is defined but long (more than 10 seconds): the circle/bar fills the void.

picture shows a loader in a card along with a message.
Dots 

Use the dot loading version for targeted and/or simultaneous loading, in a chat for example.

Picture shows a chat with loading dots.
Skeleton

For long loadings, opt for skeletons of the heavy components loading.

Don’t forget that if possible, you can display the loaded elements gradually as they load.

For more guidance on the skeletons, go to the skeleton component page.

Skeleton

Picture shows a skeleton used as a loader
Autosave

The autosave is an indicator of saving in a context. It can replace the component saving, or appear near the action.

Picture shows a loading bar at the bottom of a navigation.
Bar

For page loadings, add a loading bar on the top of the page.

Loading06
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