AI Typing Indicator

How It Works

Three dots bounce in sequence using CSS keyframes. Each dot has a staggered animation-delay. The middle dot changes color to blue at the peak of its bounce.

HTML

<div class="typing-indicator">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS

.typing-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.75rem 1rem;
  background: #1e293b;
  border-radius: 1rem 1rem 1rem 0.25rem;
}
.typing-indicator .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #64748b;
  animation: typing-bounce 1.4s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(1) { animation-delay: 0s; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); background: #64748b; }
  30% { transform: translateY(-6px); background: #3b82f6; }
}

JavaScript — Show/Hide Around API

async function askAI(prompt) {
  appendMessage(prompt, 'user');

  const indicator = document.createElement('div');
  indicator.className = 'typing-indicator';
  indicator.innerHTML = '<span class="dot"></span><span class="dot"></span><span class="dot"></span>';
  appendToChat(indicator);

  const res = await fetch('/api/chat', { /* ... */ });
  const data = await res.json();

  indicator.remove();
  appendMessage(data.reply, 'bot');
}