Loading

CSS-only shimmer animations for loading and placeholder states.

Basic skeleton

Combine skeleton shapes inside a .loading container. Children animate with staggered delays.

<div class="loading">
  <div class="skeleton skeleton--heading"></div>
  <div class="skeleton skeleton--text"></div>
  <div class="skeleton skeleton--text"></div>
</div>

Shape variants

Use shape modifiers to match the content being loaded.

Code

<div class="skeleton skeleton--heading"></div>
<div class="skeleton skeleton--text"></div>
<div class="skeleton skeleton--avatar"></div>
<div class="skeleton skeleton--image"></div>

Heading

Text

Avatar

Image

Card placeholder

Compose skeletons with layout primitives to match real content shapes.

Code

<div class="card box stack loading">
  <div class="cluster">
    <div class="skeleton skeleton--avatar"></div>
    <div class="skeleton skeleton--text" style="max-inline-size: 40%;"></div>
  </div>
  <div class="skeleton skeleton--text"></div>
  <div class="skeleton skeleton--text"></div>
</div>

Animation pauses when prefers-reduced-motion is enabled.