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