COMPONENTS

Skeleton Loader

Skeleton loaders are visual placeholders for information while data is still loading.

skeleton

A skeleton loader provides a low fidelity representation of the interface that will be loaded.

skeleton
  1. Circle skeleton item
  2. Rounded skeleton item
  3. Square skeleton item

A skeleton loader can be built using a combination of the variations listed below. Skeleton Loader has four key variations — skeleton item, skeleton area, skeleton table, and skeleton text.

Skeleton item offers three shapes to build your own custom skeleton loader framework – circle, rounded, and square.

skeleton

Skeleton area can be used for image or chart areas and can optionally include a centered icon. See available icons

skeleton

Skeleton table should be used for grid or table components. The skeleton can be set to a custom number of rows and columns to more closely match the expected interface.

skeleton

Skeleton text should be used where text elements like headings, paragraphs or labels will be rendered. The component is built to match the height of the text being shown by referencing typography tokens.

skeleton

Skeleton loader components can be set to have a pulse animation, wave animation or no animation.

skeleton
skeleton

Skeleton items come in five sizes to match the typical sizes of component within the system — extra small, small, medium, large and extra large.

skeleton
  • Avoid using a skeleton to represent components that 'contain' other components such as lists, cards, accordion and other layout elements.
  • Use to reduce page jumpiness as different parts load causing elements to be pushed down in viewport.
skeleton guidance

DO: Map the skeleton shapes to the general size and shape of the data that will be replacing it once loaded.

skeleton guidance

DON'T: Use too much detail or color in the skeleton.