Skeleton
Users should remove <rh-skeleton> elements from the DOM once content is loaded. See the Accessibility for more information.
Importing
Add rh-skeleton to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-skeleton/rh-skeleton.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rh-skeleton/rh-skeleton-lightdom.css">Usage
rh-skeleton
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.
| Slot Name | Summary | Description |
|---|---|---|
|
Place a visually hidden description of what is being loaded for assistive technologies. |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
type |
type |
What shape the skeleton should be. Defaults to |
|
|
size |
size |
What size the skeleton should be. Defaults to |
|
|
| Token | Copy |
|---|---|
--rh-length-4xs
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
