Skeleton loader

A skeleton loader is a simplified preview of loading content.

Examples

Basic skeleton loader
Loading story...
With custom shapes
Loading story...

View in Pajamas UI Kit →

Structure

Numbered diagram of a skeleton loader structure
  1. Shapes: Simple shapes represent different content types in a single skeleton loader.

Guidelines

When to use

  • Offer a simplified preview of loading content to help manage user expectations while decreasing perceived load time.
  • Avatars, cards, charts, content blocks, lists, and tables are good candidates for a skeleton state.

When not to use

  • Instantly loading content doesn't need a skeleton loader.
  • Dynamic content revealed upon user interaction shouldn't be replaced by a skeleton loader, as the content should already be loaded by the time the user is able to interact with it. For example, content within a toast message, dropdown menu, or modal.
  • For background processes, a loading state tied to a specific component, or a piece of existing content, use a spinner instead.
  • A skeleton loader shouldn’t be used in combination with a spinner, choose the one that fits the use case best.

Appearance

  • Comprised of one or more basic, grayscale shapes that have a horizontally pulsing motion to indicate they are loading.
  • Use rounded corners, even for rectangular shapes. Shapes follow the standard spacing guidelines.
  • Each shape should represent content in a recognizable way. For example, a long rectangle for a line of text or a circle for an avatar.

Custom skeleton loaders

To create a new skeleton loader:

  1. Start by designing with the variants in the Pajamas UI Kit and use spacing that follows the geometric progression.
  2. Output an SVG of the skeleton loader.
  3. Use the <gl-skeleton-loader> component and customize the SVG properties.

Behavior

  • Content immediately replaces each skeleton loader when it's available.

Accessibility

  • When a change occurs in the UI, like a loading state, it's good to notify a user what is happening. While a skeleton loader visually indicates that a process is happening, it should also be announced by assistive technology through the use of aria-live.
  • See the WAI-ARIA aria-live documentation for more details.

Reference

Last updated at: