Typing Indicator Animation

Create animated typing indicators with bouncing dots (like messaging apps). Includes multiple variations: three dots, pulsing circles, and wave patterns. Add customizable colors and timing.

Add professional and organic typing indicators to your chat interfaces or loading states. This snippet provides three distinct animation styles using pure CSS keyframes.

Features

• Multiple Variations: Choose from Classic Bounce, Ripple Pulse, or Sound Wave.
• Customizable: Easily adjust colors and timing variables.
• Lightweight: Pure CSS implementation with minimal markup.

HTML Structure

The structure is simple, using a container div with nested dots.

<!-- Variation 1: Bouncing Dots -->
<div class="typing-indicator bounce">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<!-- Variation 2: Pulsing Circles -->
<div class="typing-indicator pulse">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<!-- Variation 3: Wave Pattern -->
<div class="typing-indicator wave">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

CSS Styling

Here are the key styles for the base indicator and the bounce animation.

/* Base Style */
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 2rem;
  gap: 6px;
  min-height: 3rem;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #94a3b8;
  border-radius: 50%;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* Bounce Animation */
.bounce .dot {
  animation-name: bounce;
}

.bounce .dot:nth-child(1) { animation-delay: -0.32s; }
.bounce .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
    opacity: 0.5;
  } 
  40% { 
    transform: scale(1);
    opacity: 1;
    background-color: #60a5fa;
  }
}

The full CSS file in the download includes all variations (Pulse and Wave) and necessary variables for easy customization.