Skeleton

Placeholder shapes for content that is loading.

Use .skeleton for loading placeholders.
Use data-shape for common placeholder forms: text, title, avatar, box.
Put role="status" and accessible text on the loading region, not on every placeholder.
Use layout utilities for placeholder arrangement.
Only relevant for simple placeholders - use more structural solutions like phantom-ui for complex cases.

<article class="card" role="status" aria-label="Loading profile">
  <div class="cluster">
    <div class="skeleton" data-shape="avatar" aria-hidden="true"></div>
    <div class="stack grow">
      <div class="skeleton" data-shape="title" aria-hidden="true"></div>
      <div class="skeleton" data-shape="text" aria-hidden="true"></div>
    </div>
  </div>
</article>