Skip to content

Skeleton

Preview Available in release assets

Reserve the space of content that is still loading so the layout does not shift, while a separate status message tells assistive technology what is happening.

Skeleton primary example

Show code
<div aria-busy="true">
  <p class="thin-visually-hidden" role="status">Loading orders</p>
  <div class="thin-skeleton" aria-hidden="true">
  </div>
</div>

Each authored example uses the production assets and includes copyable markup.

Lines and a block

Size each placeholder like the content it reserves.

Show code
<div class="thin-stack" data-space="s" aria-busy="true">
  <p class="thin-visually-hidden" role="status">Loading article</p>
  <div class="thin-skeleton" aria-hidden="true" style="inline-size: 60%">
  </div>
  <div class="thin-skeleton" aria-hidden="true">
  </div>
  <div class="thin-skeleton" aria-hidden="true" style="block-size: 8rem">
  </div>
</div>

Anatomy

  • Decorative div.thin-skeleton with aria-hidden=true
  • Container marked aria-busy while loading
  • A visible or visually hidden role=status message

Variants and sizes

  • Single line — shown above
  • Block placeholder — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Motion and system colors

Reduced motion stops the shimmer; forced colors draw an outline.

Show code
<div aria-busy="true">
  <p role="status">Loading orders</p>
  <div class="thin-skeleton" aria-hidden="true">
  </div>
</div>

Loaded content

The skeleton is gone and aria-busy is cleared.

Show code
<div aria-busy="false">
  <p>3 orders</p>
</div>
  • Reduced motion — shown above
  • Forced colors — shown above
  • Loading replaced by content — shown above

Interaction and keyboard behavior

Replace the skeletons with the real content when it arrives and clear aria-busy. Skeletons never take focus.

Accessibility

Hide every skeleton from assistive technology and announce loading once through a status message. Reduced motion stops the shimmer.

Contract
NATIVE
Basis
Styles native HTML elements; no APG widget

API

Use div.thin-skeleton with aria-hidden=true inside a container with aria-busy=true. Set an inline or block size on the skeleton to match the content it stands in for.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without CSS the skeletons are empty and the status message still says the content is loading.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/skeleton/style.ts