Skeleton
Content placeholder with pulse and sheen effects for loading states.
<rhx-skeleton>
Examples
Effects
<rhx-skeleton rhx-effect="none" rhx-width="200px" rhx-height="24px" />
<rhx-skeleton rhx-effect="pulse" rhx-width="200px" rhx-height="24px" />
<rhx-skeleton rhx-effect="sheen" rhx-width="200px" rhx-height="24px" />Shapes
<rhx-skeleton rhx-shape="rectangle" rhx-width="120px" rhx-height="24px" />
<rhx-skeleton rhx-shape="rounded" rhx-width="120px" rhx-height="24px" />
<rhx-skeleton rhx-shape="circle" rhx-width="48px" rhx-height="48px" />Content Placeholder
<div style="display: flex; gap: var(--rhx-space-md); align-items: center;">
<rhx-skeleton rhx-shape="circle" rhx-width="48px" rhx-height="48px" />
<div style="flex: 1; display: flex; flex-direction: column; gap: var(--rhx-space-xs);">
<rhx-skeleton rhx-width="60%" rhx-height="16px" />
<rhx-skeleton rhx-width="40%" rhx-height="12px" />
</div>
</div>
<rhx-skeleton rhx-width="100%" rhx-height="80px" />
<rhx-skeleton rhx-width="75%" rhx-height="16px" />Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-effect |
string |
pulse |
Animation effect: none, pulse, sheen |
rhx-shape |
string |
rectangle |
Shape: rectangle, rounded, circle |
rhx-width |
string |
100% |
Width CSS value |
rhx-height |
string |
1rem |
Height CSS value |
Accessibility
- Renders with
role="presentation"as it is a decorative placeholder. - Sets
aria-busy="true"to indicate content is loading. - Hidden from screen readers since skeleton shapes are purely visual placeholders.