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.

Use

AI chat interfaces while the model generates a response

Avoid

Non-conversational contexts (use spinner or progress instead)

Safer Alternative

No safer default listed.

Risk Level

Low risk

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

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

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)

A focused implementation sketch you can adapt to your product state.

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.