skeleton is a decorative placeholder. It rounds the box, removes images
and shadows, makes text transparent, hides descendants and pseudo-elements,
and applies the skeleton animation. An empty element receives a minimum
height. Its default radius is rd:1x, independent of sibling position; a
radius utility on the root overrides it. Under reduced motion the animation stops.
<div aria-hidden="true" class="skeleton min-h:8 w:100% bg-color:neutral-200 outline-width:1@forced-colors outline-style:solid@forced-colors">
<span>Placeholder dimensions</span>
</div>
<p role="status">Loading preview…</p>Keep the status outside the placeholder, and mark the shape
aria-hidden="true". Child text can provide intrinsic dimensions but should
not be the only loading message; direct transparent text may reappear in
forced-colors mode. Supply a static surface for reduced motion and a visible
outline in forced colors. Do not place a focusable control or sensitive data
inside the placeholder.
The shortcut does not know when loading finishes. Replace the placeholder with real content when application data arrives, and update or remove the status accordingly. Size, background color, and the number of shapes remain consumer choices.