Back to Docs
Recipe

Typing Indicator

Show users when someone is composing a message — the three-dot animation that signals presence before the reply arrives.

Live Preview

Hover or focus the bubble to see the animation loop.

When to use

  • Real-time chat or messaging surfaces
  • AI assistant streaming responses
  • Any async pipeline where latency is expected

Implementation

  • Pure CSS — three span dots
  • Tailwind animate-bounce with staggered delays
  • Wrap in role="status" for screen readers

Accessibility notes

Always pair the animation with aria-label or a visually-hidden live-region so assistive technology announces the typing state. Avoid infinite loops when the sender stops composing — tear down the indicator on idle timeout.