Skeleton
Skeleton loaders provide visual placeholders while content is loading.
Basic usage
Section titled “Basic usage”<!-- Circle skeleton -->
<div class="af-skeleton af-skeleton-circle" style="width: 48px; height: 48px;">
</div>
<!-- Text skeleton -->
<div class="af-skeleton af-skeleton-text">
</div>
<div class="af-skeleton af-skeleton-text" style="width: 80%;">
</div>Accessibility
Section titled “Accessibility”- Mark the loading region
aria-busy="true"while skeletons are shown - Skeletons are decorative and should be
aria-hidden="true"
Variants
Section titled “Variants”af-skeleton-circle- Circular skeleton (for avatars, icons)af-skeleton-text- Text line skeleton