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

Loader

Loader is an element allowing you to show the user that an action is ongoing.

Usage
Loader

Use loader to give feedback about a temporary state, in which no other action is possible, permitting you to differentiate downloading data, a calculation or sending a file, for example, from a possible technical problem.

The loader is a basic element for indicating that something is loading. However, for targeted and/or simultaneous loading, the “dotted” version is preferred.

 

Best practices

- Loader is always a temporary state.

- Loader should always be expressed through animation in order to represent the idea of progression.

- Instances of loading should be limited. Technical solutions should be set up in conjunction for data access and availability.

- The title of the loader should explain the actual state of the action that was taken (downloading, sending, calculation, etc.).

- Use simple and concise wording.

- For short downloads, opt for using skeletons when they are available.

- Choose a spinner that shows the percentage for very long downloads.

 

Placement

Loader is mainly used as an overlay on a page or a card while being updated.

Visual

Appearance

Loader may be followed by a label or be located in a container. The minimum size is 16px.

Back to top