Skeleton Text
The Skeleton Text renders N animated (shimmer) lines, with the last one shorter, to mimic a paragraph while the real content is still loading. Use it during data fetching or hydration to reduce the sense of waiting. It marks aria-busy="true" on the host and hides the decorative lines from screen readers (aria-hidden), respecting prefers-reduced-motion by swapping the shimmer for a soft pulse.
Preview
<pura-skeleton-text lines="3"></pura-skeleton-text>
<pura-skeleton-text lines="5" gap="12px" last="40%"></pura-skeleton-text>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Number of lines to render. Clamped to a minimum of 1; invalid values fall back to 3. |
gap | string | var(--pura-space-2) | CSS length for the vertical spacing between lines. |
last | string | 60% | CSS width of the last (shorter) line, applied only when there is more than one line. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/skeleton-text.js"></script>import "./pura/lib/skeleton-text.js";