Skeleton
Animated loading placeholders for content being fetched.
Basic shapes
Section titled “Basic shapes”<!-- Text line -->
<ac-skeleton style="height:1rem;width:80%;border-radius:4px"></ac-skeleton>
<!-- Avatar -->
<ac-skeleton style="width:3rem;height:3rem;border-radius:50%"></ac-skeleton>
<!-- Card -->
<ac-skeleton style="height:120px;border-radius:12px"></ac-skeleton>Pulse variant
Section titled “Pulse variant”<ac-skeleton class="ac-skeleton--pulse" style="height:1rem;width:70%;border-radius:4px"></ac-skeleton>
<ac-skeleton class="ac-skeleton--pulse" style="height:1rem;width:50%;border-radius:4px"></ac-skeleton>Card skeleton pattern
Section titled “Card skeleton pattern”<div style="display:flex;flex-direction:column;gap:0.75rem;padding:1.5rem;border:1px solid var(--ac-border);border-radius:var(--ac-radius-card)">
<div style="display:flex;gap:0.75rem;align-items:center">
<ac-skeleton style="width:2.5rem;height:2.5rem;border-radius:50%;flex-shrink:0"></ac-skeleton>
<div style="flex:1;display:flex;flex-direction:column;gap:0.375rem">
<ac-skeleton style="height:0.875rem;width:50%;border-radius:4px"></ac-skeleton>
<ac-skeleton style="height:0.75rem;width:35%;border-radius:4px"></ac-skeleton>
</div>
</div>
<ac-skeleton style="height:0.875rem;width:100%;border-radius:4px"></ac-skeleton>
<ac-skeleton style="height:0.875rem;width:85%;border-radius:4px"></ac-skeleton>
<ac-skeleton style="height:0.875rem;width:70%;border-radius:4px"></ac-skeleton>
</div>