Skip to content

Skeleton

This pattern is used to transition from a temporary loading state to a fully loaded UI.

Skeleton loaders are UI abstractions that hint at where content will appear once it's loaded. They're used in combination with other transitions to reduce perceived latency and stabilize layouts as content loads.

Principles

Simplicity: Use basic shapes and neutral colors that align with the actual content layout to create a clear loading indicator.

Animated: Incorporate gentle animations, like pulsing or fading, to indicate that content is loading and improve perceived wait times.

Responsive: Ensure skeleton loaders adapt to various screen sizes and maintain proportionality, providing a seamless experience across devices.

When to use

You should use skeleton loaders in the following situations:

  • When images are loading, they can help reduce perceived loading time and keep users engaged.
  • When content changes frequently (like social feeds or dashboards), skeleton loaders can maintain a smooth experience while data is being updated.

Skeleton loaders provide a preview of the layout and structure of the content that is loading, helping users understand what to expect. They can create an illusion of speed, as users can start to interact with the page layout even before the full content has loaded. This can make the app feel more responsive.

Design Guidelines

Colors

Skeleton loaders should have a low-opacity background (often a light gray) to indicate that content is loading. The color should be neutral and not distract from the overall design.

Consider using subtle animations, like a shimmer effect, to indicate that the content is in the process of loading. This adds a dynamic feel and can enhance user engagement.

Placement

Position skeleton loaders in the same area where the content will eventually appear, helping users maintain a sense of orientation.

Don’t use skeleton loaders in areas where there is no content or where the shown content is not what’s expected.

Sizing

Use shapes and sizes that match the expected content, such as rectangles for text blocks or images and circles for avatars. This helps maintain context and provides a clear visual cue of what will appear.

Don’t use shapes that don’t match the content that will eventually appear.