Skeleton
Placeholder graphic that fills the space of content while it loads, using a shimmering animation.
Use when you need a shimmering placeholder bar to hold the space for content while it loads. Size
<r-skeleton>'s parent to match the real content, then swap it out when data arrives.
Quick Start
Basic Usage
The skeleton stretches to fill the width of its parent element and is 16px tall by default.
<r-skeleton></r-skeleton>Width Follows the Parent
Because the skeleton is width: 100%, control its length by sizing the container it lives in.
<div style="width: 100px">
<r-skeleton></r-skeleton>
</div>
<div style="width: 200px">
<r-skeleton></r-skeleton>
</div>
<div style="width: 100%">
<r-skeleton></r-skeleton>
</div>Stacking Placeholders
Compose several skeletons to mimic a block of text or a paragraph.
<div style="display: flex; flex-direction: column; gap: 12px">
<r-skeleton></r-skeleton>
<r-skeleton></r-skeleton>
<r-skeleton></r-skeleton>
</div>API Reference
Properties
| Property | Type | Default | Description |
|---|---|---|---|
sheet |
string |
'' |
CSS injected into the component's shadow DOM for scoped style overrides |
Custom Styling sheet
Pass a CSS string through sheet to override the skeleton's look inside its shadow DOM.
<r-skeleton sheet=".ran-skeleton { height: 40px; border-radius: 20px; }"></r-skeleton>CSS Variables
The skeleton also exposes CSS custom properties for theming without sheet:
| Variable | Default | Description |
|---|---|---|
--ran-skeleton-height |
16px |
Height of the placeholder bar |
--ran-skeleton-background |
var(--ran-gray-alpha-200, …) |
Base (non-shimmer) fill color |
--ran-skeleton-border-radius |
var(--ran-radius-sm, 6px) |
Corner radius |
--ran-skeleton-shimmer-background |
linear-gradient(90deg, …) |
The moving highlight gradient |
--ran-skeleton-shimmer-animation-duration |
1.4s |
Duration of one shimmer sweep |
<r-skeleton style="--ran-skeleton-height: 32px; --ran-skeleton-border-radius: 16px"></r-skeleton>Events
None. The skeleton does not dispatch any custom events.
Slots
None. The skeleton renders only its own placeholder bar and does not project slotted content.
Best Practices
- Match the layout: Size the parent container so each skeleton matches the width of the real content it stands in for.
- Mimic the shape: Stack multiple skeletons with consistent gaps to represent multi-line text or list rows.
- Theme via variables: Prefer the
--ran-skeleton-*CSS variables for simple tweaks; usesheetonly when you need selectors the variables don't cover. - Swap on load: Replace skeletons with real content once data arrives, rather than leaving them animating indefinitely.