Components

Skeleton

Skeleton is used to indicate that content on a page is loading. It provides the user with a visual hint of what the content will eventually look like.

Overview Code Accessibility

Use Skeleton when

you need to indicate that content on a page is in the process of loading
you want to show users what the layout of the content will look like once it has loaded
the content is expected to take more than one second to load

Avoid Skeleton when

you need to indicate that the system is working on a task the user must wait for, use a Spinner instead

Example

Variants

Skeleton comes in three variants: rectangle, circle, and text.

Usage example

Text variant

Guidelines

Skeleton is an alternative to Spinner when you want to indicate that content is loading. It helps users understand what is coming and can make the waiting time feel shorter.

Choose the Skeleton variant based on the type of content being loaded, such as headings, text blocks or images. Try to mimic the structure of the actual content to make the transition to the fully loaded content feel smooth.

Edit this page on github.com (opens in a new tab)