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

Skeletons

Skeletons are simplified representations simulating the presence of an existing element.

Usage
Skeleton Kit

Skeletons are used to improve the loading of certain pages that take some time to fully load. Their low-fidelity aspect gives the impression that the interface is pre-loading. By showing that the contents of the page have not yet completely loaded, the perception of the loading time is eased by providing visual feedback. The skeleton may also indicate the future presence of an element (for example, a chart that will appear when some information has been entered). A skeleton is typically used for complex elements or cards with content, which are most likely to need more time to load.

 

Best Practices

- A skeleton is a temporary state.

- Do not use a skeleton for basic elements (buttons, links, etc.) individually.

- When using it to pre-load, its appearance should not exceed three seconds.

- When a skeleton is used while waiting for an action to be completed, an explanatory message may be added.

- For a full page, always fade in and fade out all the loading skeletons at the same time, so as not to have the appearance of a domino effect.

- The page title must not be presented in a skeleton, but loaded directly to indicate that elements are loading.

- Do not use a skeleton for elements that are also used for loading (spinners, etc.)

- Do not use a skeleton for notification elements (banners, toasts, etc.)

 

Placement

Skeletons should be placed in the exact location of the element they are replacing.

Visual
Skeleton

Appearance

The skeleton is composed of gray blocks simulating the presence of an element in low fidelity.

 

Behavior

The skeleton may appear by itself, or accompanied by a notification field.

 

Back to top