Skeleton

Skeletons are used to provide a low fidelity representation of content before it appears in a view. This improves the perceived loading time for our users.

Usage

Code

Accessibility

  <section aria-label="Loading subjects list">
    <sl-skeleton effect="shimmer"></sl-skeleton>
    <sl-skeleton effect="shimmer"></sl-skeleton>
    <sl-skeleton effect="shimmer"></sl-skeleton>
  </section>

When to use

Loading states

Use skeletons to represent content while data is being fetched. For instance, display a skeleton list before actual items load.

Page transitions

During page transitions or navigation, show skeletons to indicate that content is loading. This maintains user engagement.

Image loading

When images take time to load, display image placeholders using skeletons. Users perceive faster loading times.

When not to use

Misleading expectations

Don’t use skeletons if they might mislead users. For instance, showing a skeleton for a feature that won’t load can frustrate users.

  <sl-skeleton effect="sheen" variant="circle" aria-label="Loading avatar"></sl-skeleton>
  <sl-skeleton effect="sheen" aria-label="Loading title"></sl-skeleton>
  <sl-skeleton effect="sheen" aria-label="Loading subtitle"></sl-skeleton>
  <sl-skeleton effect="sheen" aria-label="Loading description"></sl-skeleton>
  <sl-skeleton effect="sheen" aria-label="Loading description"></sl-skeleton>

The skeleton component has display: block set by default, so it occupies the entire width of the container. If you want to change the width you can simply use inline-size to manipulate the width e.g. inline-size: 80%;. When you need to indicate that an avatar or any other element with a round shape is loading, you can use variant="circle" for such purposes.

API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`effect`	`effect`	`'none' \| 'shimmer' \| 'pulse' \| 'sheen'`	`'shimmer'`	Skeleton's effect.
`variant`	`variant`	`'circle' \| 'default'`	`'default'`	Skeleton's variant.

WAI-Aria

The Skeleton component is only a visual indicator and should be integrated within an element that refers to the loading state.

Attribute	Value	Description	User supplied
`aria-busy`	`'true'`	To illustrate that the content is loading.	no
`aria-label`	string	Can be used to describe what content is being loaded. Can be added to the `sl-skeleton` or/and wrapper element.	yes

Interactive example