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.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
effect | effect | Determines which animation effect the skeleton will use. The default is no animation. | 'pulse' | 'sheen' | undefined | — |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-skeleton-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius) |
--n-skeleton-color | Controls the main color of the skeleton, using our color tokens. | var(--n-color-border) |
--n-skeleton-sheen-color | Controls the sheen color of the skeleton, using our color tokens. | var(--n-color-border-strong) |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use skeleton component for dynamic content only.
- Use to give the user an indication of what the page layout will be like once loaded.
- Mimick the actual layout using multiple Skeleton components.
- Use
aria-busy="true"to indicate which area on the screen is currently loading and remove it or set it tofalseonce loaded.
Don’t
- Don’t use Skeleton component for static content.
- Don’t show placeholder content after Skeleton disappears that will change when the page fully loads.
Integration
For integration guidelines, please see Web Components documentation .