Tailwind CSS cookbook · Beginner
Show a skeleton loader while content loads
Display a placeholder shape of the content while data is loading, instead of a spinner or empty space.
Approach
Mirror the layout of the real content with grey blocks and pulse them with animate-pulse. Mark the region
busy with aria-busy="true" and give screen readers a text alternative.
Solution
<div class="m-6 max-w-sm rounded-xl p-4 ring-1 ring-slate-200" aria-busy="true">
<span class="sr-only">Loading profile…</span>
<div class="flex animate-pulse items-center gap-4">
<div class="size-12 rounded-full bg-slate-200"></div>
<div class="flex-1 space-y-2">
<div class="h-3 w-2/3 rounded bg-slate-200"></div>
<div class="h-3 w-1/2 rounded bg-slate-200"></div>
</div>
</div>
<div class="mt-4 animate-pulse space-y-2">
<div class="h-3 rounded bg-slate-200"></div><div class="h-3 rounded bg-slate-200"></div><div class="h-3 w-4/5 rounded bg-slate-200"></div>
</div>
</div>
Pitfalls
- Skeletons that don't match the final layout cause a jump when content arrives.
- Pulsing for users who prefer reduced motion: use
motion-safe:animate-pulse.
Variations
- Use a shimmer gradient (
bg-linear-to-r from-slate-200 via-slate-100 to-slate-200) with a custom animation.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/animation