Skeleton loader

A skeleton loader is a simplified preview of loading content.


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

View in Pajamas UI Kit →


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


When to use

  • Use the skeleton loader when loading content and a loading spinner is not prominent enough.
  • Use when there is more than a single content element loading at the same time that requires an indicator.
  • 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.
  • For an inline action or feedback, like an alert, consider a spinner or no loading state instead.
  • 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.


  • 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.


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


  • When a change occurs in the UI, like a loading state, it's good practice to notify the user what's happening. However, since a skeleton loader should only be present for a short period of time, and during an expected loading period, it does not need to be a live region or communicate that the page is busy.


Last updated at: