Skeleton loader

Examples

View in Pajamas UI Kit →

Structure

1. Shapes: Simple shapes represent different content types in a single skeleton loader.

Guidelines

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.

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

Reference

• The Skeleton Loading component has been deprecated in favor of the Skeleton Loader.
• Everything you need to know about skeleton screens, by Bill Chung.
• More Accessibile Skeletons, by Adrian Roselli.