Skeleton
On this page
On this page
Overview
A skeleton displays an animated placeholder that mimics the structure and layout of actual content while it loads. It gives users a preview of what's coming and reduces perceived loading time.
Edit element properties
import '@rhds/elements/rh-skeleton/rh-skeleton.js';<rh-skeleton></rh-skeleton>
<link rel="stylesheet" href="../rh-skeleton-lightdom.css">What shape the skeleton should be. Defaults to body-copy.
What size the skeleton should be. Defaults to md.
The size attribute is not valid on circle, square, or rectangle skeletons.
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
When to use
- When the content structure can be visually approximated before the actual information appears
- When parts of a user interface are populated with data fetched asynchronously and content loads progressively
- When the loading delay is less than ten seconds
A skeleton loader with an animation that repeats and gently changes color from left to right
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
