Part 48: Built-in Animations: Spin, Ping, Pulse & Bounce

Tailwind includes four out-of-the-box CSS animations ready to use.

1. animate-spin (Loading Spinners)

Rotates infinitely at 360 degrees:

<button class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded">
  <svg class="animate-spin size-5 text-white" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
  </svg>
  Processing...
</button>

2. animate-ping (Live Notification Radar)

Creates a sonar-like beacon effect for live activity indicators:

<span class="relative flex size-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full size-3 bg-emerald-500"></span>
</span>

3. animate-pulse (Skeleton Loaders)

Fades opacity gently in and out:

<div class="animate-pulse flex space-x-4 p-4 border rounded">
  <div class="rounded-full bg-slate-200 size-10"></div>
  <div class="flex-1 space-y-2 py-1">
    <div class="h-4 bg-slate-200 rounded w-3/4"></div>
    <div class="h-4 bg-slate-200 rounded w-1/2"></div>
  </div>
</div>

Key Takeaways

• animate-spin for loading indicators.
• animate-ping for live status indicators.
• animate-pulse for skeleton screens.

In Part 49, we will define Custom Keyframe Animations in Tailwind Configuration!