Usage
Skeleton provides a low fidelity representation of content before it appears in a view, improving the perceived loading time. Size it with CSS to match the content it stands in for, and combine several to outline a layout. The optional effect attribute adds an animation.
import "@nordhealth/components/lib/Skeleton"
Examples
Effects
The effect attribute adds an animation. The default is no animation; sheen and pulse are also available.
Inside a card
Combine skeletons to outline the shape of content loading inside a card.
Paragraph
Stack multiple skeletons to stand in for lines of paragraph text while content loads.
RTL
Skeleton follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- A skeleton is purely visual and hidden from assistive technology, so it isn't announced on its own.
- Mark the region that's loading with
aria-busy="true", and include a visually hidden "Loading" message (for example with Visually Hidden) so screen reader users know content is on its way. - Once the real content arrives, remove the skeletons and the
aria-busystate so assistive technology reflects the loaded view.
API reference
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.
<nord-accordion></nord-accordion>Props
| 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) |
Design guidelinesFor designers
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.