Shimmer & Skeleton

Loading states for any element. shimmer= overlays a sliding highlight; skeleton= applies a full loading state with muted background and shimmering sweep.

Shimmer overlay

shimmer on any element

This card has a shimmer overlay

Gradient card with shimmer

<!-- Shimmer overlay (::after pseudo-element) -->
<div surface="glass" shimmer>…</div>

<!-- Wave shimmer (entire background animates) -->
<div shimmer="wave">…</div>

<!-- Fast shimmer -->
<div shimmer="fast">…</div>

Skeleton loading

Card skeleton

<div surface="glass" density="spacious" radius="xl" layout="stack" gap="md">
  <div skeleton radius="lg" style="height:140px;"></div>
  <div skeleton radius="md" style="height:20px;width:75%;"></div>
  <div skeleton radius="md" style="height:14px;width:90%;"></div>
  <div skeleton radius="full" style="height:36px;width:120px;"></div>
</div>

List skeleton

<div layout="row" gap="md" style="align-items:center;">
  <div skeleton radius="full" style="width:40px;height:40px;"></div>
  <div layout="stack" gap="xs" style="flex:1;">
    <div skeleton radius="sm" style="height:14px;width:60%;"></div>
    <div skeleton radius="sm" style="height:12px;width:80%;"></div>
  </div>
</div>

Speed variants

<div shimmer="fast">…</div>    <!-- 0.9s -->
<div shimmer>…</div>           <!-- 1.8s (default) -->
<div shimmer="slow">…</div>    <!-- 3s -->

<!-- Token override -->
<div shimmer style="--aura-shimmer-speed:2.5s;--aura-shimmer-opacity:0.15">…</div>