React Recipe • Production Pattern
Three Dots Loader Animation in React: Fluid Typing & Pulse Indicators
Chatbots, conversational AI interfaces, and messaging applications depend on three-dots typing indicators to communicate asynchronous processing. ExodeUI’s three dots loader animation features perfectly synchronized sinusoidal wave delays, harmonic spring bounces, and subtle opacity transitions, providing an organic, lifelike indicator that keeps users engaged while waiting for replies.
Runnable ExodeUI React Code Example
Production ReadyImport the ExodeUICanvas component directly into your React application tree. Wire states, triggers, and parameters declaratively:
import React from 'react';
import { ExodeUICanvas } from 'exodeui';
export function TypingIndicator({ isTyping = true }) {
return (
<div className="typing-bubble" aria-live="polite" aria-label="AI is typing...">
<ExodeUICanvas
src="/scenes/three-dots-loader.json"
stateMachine="TypingMachine"
inputs={{
"active": isTyping,
"dotBounce": 1.4
}}
/>
</div>
);
}Frequently Asked Questions about three dots loader animation
How does staggered wave timing work in the three dots loader?
Each dot node in ExodeUI is offset by a phase delay (e.g. 150ms), creating a continuous fluid sine wave that guides the user’s eye smoothly.
Can the typing indicator match chat bubble theme colors dynamically?
Yes. Input properties allow you to adjust dot fill color and opacity to match incoming or outgoing message bubble styles.
Does the three dots animation run efficiently when multiple chat threads are open?
Yes. ExodeUI’s lightweight runtime pauses animation calculations when the container is scrolled out of viewport view, preserving device battery and CPU cycles.
What accessibility properties should be attached to typing indicators?
Use aria-live="polite" and an aria-label="Typing in progress" on the wrapper to keep screen reader users informed without disrupting ongoing speech.