Typing Dots (AI Reply)

Three animated dots that pulse sequentially, indicating that an AI or person is typing a response. Creates anticipation and confirms the system is processing.

Live Demo

What It Is

Three animated dots that pulse sequentially, indicating that an AI or person is typing a response. Creates anticipation and confirms the system is processing.

✓When to Use

AI chat interfaces while the model generates a response
Messaging apps to show someone is typing
Conversational UIs where response time is 2-10 seconds
After user submits a question and waits for an answer

✕When NOT to Use

Non-conversational contexts (use spinner or progress instead)
When response time is instant or under 1 second
Loading large data sets (use skeleton or progress bar)

You've Seen It In

ChatGPTClaudeiMessageSlackWhatsApp

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a typing indicator with three dots that pulse in sequence. Show it when AI or user is typing a response.

Code Example (Tailwind CSS)

export function TypingDots() {
  return (
    <div className="flex items-center gap-1.5 px-4 py-3">
      <div className="h-2 w-2 animate-typing-dots rounded-full bg-zinc-400" style={{ animationDelay: '0s' }} />
      <div className="h-2 w-2 animate-typing-dots rounded-full bg-zinc-400" style={{ animationDelay: '0.2s' }} />
      <div className="h-2 w-2 animate-typing-dots rounded-full bg-zinc-400" style={{ animationDelay: '0.4s' }} />
    </div>
  );
}

"text-stone-400 italic">// Add to globals.css:
"text-stone-400 italic">// @keyframes typing-dots {
"text-stone-400 italic">//   0%, 60%, 100% { opacity: 0.3; }
"text-stone-400 italic">//   30% { opacity: 1; }
"text-stone-400 italic">// }

Related Effects

Spinner / Loading Circle

A circular animated icon that rotates continuously, signaling that a process is underway. The most universally recognized loading indicator.

Pulse Placeholder

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.

Blur Fade-in

Content fades in while simultaneously transitioning from blurred to sharp focus, creating a cinematic reveal effect. More sophisticated than a simple fade.