Tailwind CSS Skeleton

Class Name	Type	Description
skeleton	Component	Displays a markup’s structure.
skeleton-animated	Modifier	Displays skeleton with loading animation.
skeleton-striped	Modifier	Displays skeleton with striped lines.

Variants

Default skeleton

Apply the skeleton component class to any markup to showcase it’s structure.

Animated skeleton

Apply the skeleton-animated modifier class to any markup to showcase it’s structure with loading animation.

Striped skeleton

Apply the skeleton-striped modifier class to any element to display its structure with a striped skeleton effect.

Active skeleton

Add the animate-pulse animation class to any markup to display its structure with an active animation. For additional options, refer to the TailwindCSS animation documentation.

Illustrations

Circle with content

Utilize the provided example to present a skeleton featuring a circular shape and content.

<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>

Rectangle with content

Utilize the provided example to present a skeleton featuring a Rectangular shape and content with loading animation.

<div class="flex w-52 flex-col gap-4">
  <div class="skeleton skeleton-animated h-32 w-full"></div>
  <div class="skeleton skeleton-animated h-4 w-28"></div>
  <div class="skeleton skeleton-animated h-4 w-full"></div>
  <div class="skeleton skeleton-animated h-4 w-full"></div>
</div>

FlyonUI