34Skeleton

Loading placeholder for waits over ~1s. The shimmer flattens to a static block under prefers-reduced-motion rather than freezing mid-sweep.

Use it for

Content whose shape is known while it loads — cards, text, avatars

Not for

Sub-second waits — Spinner, or nothing

Text / title / avatar / card

markup

<div style="max-inline-size:22rem">
  <span class="ns-skeleton ns-skeleton--avatar" style="display:inline-block"></span>
  <div class="ns-skeleton ns-skeleton--title" style="margin-block:10px"></div>
  <div class="ns-skeleton ns-skeleton--text"></div>
  <div class="ns-skeleton ns-skeleton--text" style="inline-size:70%"></div>
</div>

Accessibility contract

Shapes are aria-hidden; one visually-hidden "Loading" announces instead of eight shimmering bars