Skeleton

Loading placeholder with shimmer animation for content that is still loading.

Variants

<!-- Text line -->
<div class="nano-skeleton nano-skeleton--text" style="width:80%"></div>

<!-- Circle (e.g. avatar placeholder) -->
<div class="nano-skeleton nano-skeleton--circle"></div>

<!-- Card block -->
<div class="nano-skeleton nano-skeleton--card"></div>

Composite Loading State

<!-- Composite: avatar + text block loading state -->
<div style="display:flex;gap:0.75rem;align-items:flex-start">
  <div class="nano-skeleton nano-skeleton--circle"></div>
  <div style="flex:1;display:flex;flex-direction:column;gap:0.5rem">
    <div class="nano-skeleton nano-skeleton--text" style="width:40%"></div>
    <div class="nano-skeleton nano-skeleton--text" style="width:100%"></div>
    <div class="nano-skeleton nano-skeleton--text" style="width:70%"></div>
  </div>
</div>

<!-- CSS-only component, no Stimulus controller required -->