Skeletons

A skeleton class draws a decorative loading placeholder. Keep a real loading message available; your application controls when placeholders are replaced by content.

Usage

Markup: .skeleton

Behaviour: Application owns aria-busy and replacing placeholders.

Hide decorative placeholders from assistive technology using aria-hidden="true" on their containing wrapper. Do not place essential text inside a skeleton.
aria-busy on the affected region communicates incomplete updates. Your application must clear busy state when the content arrives. A static documentation example adds no automatic live announcements.
Theme, roundness and motion inherit. data-motion="none" pauses shimmer, reduced-motion preferences remove it, and forced colours use static boundaries. Placeholders are omitted from print.
Use --re-skeleton-width and --re-skeleton-height on a parent or individual exception. Included in all core builds; modular use: tokens, base and reva.skeletons.css.

Component API and styling module · Inherited appearance settings

Loading card content

Visible text explains the waiting state; only the placeholders are decorative.

Loading project details…

<article class="card" aria-busy="true" aria-label="Project details">
  <p>Loading project details…</p>
  <div class="stack" aria-hidden="true">
    <span class="skeleton" style="--re-skeleton-width: 55%;"></span>
    <span class="skeleton"></span>
    <span class="skeleton" style="--re-skeleton-width: 80%;"></span>
  </div>
</article>

Shared stationary placeholders

The parent disables motion. An optional height gives the first placeholder a media shape.

Preparing a preview…

<section data-motion="none" data-shape="rounded">
  <p>Preparing a preview…</p>
  <div class="stack" aria-hidden="true">
    <span class="skeleton" style="--re-skeleton-height: 8rem;"></span>
    <span class="skeleton" style="--re-skeleton-width: 60%;"></span>
  </div>
</section>