Skeleton

Skeleton loaders provide visual placeholders while content is loading.

Basic usage

<div class="af-stack" aria-busy="true" aria-label="Loading">
  <div class="af-skeleton af-skeleton-circle" style="width: 48px; height: 48px;" aria-hidden="true"></div>
  <div class="af-skeleton af-skeleton-text" aria-hidden="true"></div>
  <div class="af-skeleton af-skeleton-text" style="width: 80%;" aria-hidden="true"></div>
</div>

Accessibility

• Mark the loading region aria-busy="true" while skeletons are shown
• Skeletons are decorative and should be aria-hidden="true"

Variants

• af-skeleton-circle - Circular skeleton (for avatars, icons)
• af-skeleton-text - Text line skeleton