What is Ping animation (notifications) in Tailwind?

Tailwindmarkup~5 mins

Ping animation (notifications) in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Ping animation helps show new notifications or alerts in a friendly, eye-catching way.

To show a new message or alert on a chat app.

To highlight a new email or notification icon.

To draw attention to a button that needs user action.

To indicate loading or waiting status in a subtle way.

Syntax

Tailwind

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

The animate-ping class creates the expanding circle effect.

Use two <span> elements: one for the ping animation and one for the solid dot.

Examples

Green ping animation with a slightly bigger size.

Tailwind

<div class="relative">
  <span class="absolute inline-flex h-4 w-4 rounded-full bg-green-400 opacity-75 animate-ping"></span>
  <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500"></span>
</div>

Smaller blue ping animation for subtle notifications.

Tailwind

<div class="relative">
  <span class="absolute inline-flex h-2 w-2 rounded-full bg-blue-400 opacity-75 animate-ping"></span>
  <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</div>

Ping animation placed on a button's top-right corner.

Tailwind

<button class="relative p-2">
  Notifications
  <span class="absolute top-0 right-0 inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
  <span class="absolute top-0 right-0 inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</button>

Sample Program

This example shows a button labeled "Notifications" with a red ping animation on the top-right corner. The ping circle expands and fades out repeatedly, drawing attention to new alerts.

Accessibility is added with aria-label and role="status" so screen readers announce the new notification.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Ping Animation Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="relative p-3 bg-white rounded-md shadow-md font-semibold text-gray-800">
    Notifications
    <span class="absolute top-2 right-2 inline-flex h-4 w-4 rounded-full bg-red-400 opacity-75 animate-ping" aria-hidden="true"></span>
    <span class="absolute top-2 right-2 inline-flex rounded-full h-4 w-4 bg-red-500" aria-label="New notifications" role="status"></span>
  </button>
</body>
</html>

OutputSuccess

Important Notes

Use relative on the container to position the ping elements absolutely inside it.

Keep the solid dot on top so the ping circle appears behind it.

Use aria-label and role="status" for accessibility to announce notifications.

Summary

Ping animation uses two overlapping circles: one solid and one expanding with fading.

Tailwind's animate-ping class creates the expanding effect easily.

Position the ping inside a relative container for correct placement.