A skeleton loader is a simplified preview of loading content.
Basic skeleton loader
With custom shapes
- 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:
- Start by designing with the variants in the Pajamas UI Kit and use spacing that follows the geometric progression.
- Output an SVG of the skeleton loader.
- 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 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
- See the WAI-ARIA
aria-livedocumentation for more details.
- The Skeleton Loading component has been deprecated in favor of the Skeleton Loader.
- Read Everything you need to know about skeleton screens, by Bill Chung, for a great research-based overview.
Last updated at: