Skeleton

Pulsing placeholder shapes for loading content. Use __line for text, __circle for avatars, and __block for images or cards.

Text and shapes

index.htmlhtml
<div class="ln-skeleton">
  <div class="ln-skeleton__circle" style="width: 48px"></div>
  <div class="ln-skeleton__line" style="width: 80%"></div>
  <div class="ln-skeleton__line" style="width: 60%"></div>
  <div class="ln-skeleton__line" style="width: 70%"></div>
  <div class="ln-skeleton__block" style="height: 120px"></div>
</div>

Reference

ClassDescriptionResponsive
.ln-skeletonSkeleton container with vertical gapNo
.ln-skeleton__lineText-line placeholder (24px)No
.ln-skeleton__blockRectangular block placeholderNo
.ln-skeleton__circleCircular placeholder (avatar, icon)No
.ln-skeleton--text-bodyBody text line height (24px)No
.ln-skeleton--text-smSmall text line height (20px)No
.ln-skeleton--text-h2H2 line height (48px)No
.ln-skeleton--text-h3H3 line height (32px)No