Loading Ellipsis

Use Loading Ellipsis for inline conversational work; use Spinner for generic short operations.

Use

Short conversational waits where the system is composing or preparing a response.

Avoid

Avoid it for data loads where the user needs structure or completion progress.

Safer Alternative

Spinner / Loading Circle

Risk Level

High attention

Timing

600-900ms loop; pair with fallback text for waits longer than 3 seconds.

Easing

Use ease-in-out for dot y movement and opacity.

Risk

feels slowaccessibility sensitive

Live Demo

Generating reply

What It Is

Three small dots that rise, fade, or pulse in sequence to show a short text-like process is still active.

Decision Guidance

Use Loading Ellipsis for inline conversational work; use Spinner for generic short operations.

Best For

Short conversational waits where the system is composing or preparing a response.

Avoid When

Avoid it for data loads where the user needs structure or completion progress.

Timing

600-900ms loop; pair with fallback text for waits longer than 3 seconds.

Easing

Use ease-in-out for dot y movement and opacity.

Risk Tags

feels slowaccessibility sensitive

Alternatives

Spinner / Loading Circle Typing Dots (AI Reply)Indeterminate Progress Bar

✓When to Use

AI reply generation
Chat typing indicators
Small inline operations where a spinner would feel too heavy

✕When NOT to Use

Long waits without explanation
Measurable operations such as uploads
Page-level loading where layout context matters

Configuration Tips

01Use it inline with a short verb like "Generating" or "Thinking"
02Keep the cycle under one second so it feels conversational
03Switch to progress or explanatory text if the wait exceeds a few seconds

You've Seen It In

ChatGPTiMessageIntercom

AI Implementation Prompts

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

Create an inline "Generating reply" indicator with three animated dots that bounce in sequence beside the label.

Code Example (Tailwind CSS)

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

export function LoadingEllipsis() {
  return (
    <span role="status" aria-label="Generating reply" className="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-3 py-2 text-sm text-stone-600">
      <span>Generating reply</span>
      <span className="inline-flex gap-1">
        {[0, 1, 2].map((i) => (
          <span key={i} className="h-1.5 w-1.5 animate-bounce rounded-full bg-stone-500 [animation-duration:700ms]" style={{ animationDelay: `${i * 120}ms` }} />
        ))}
      </span>
    </span>
  );
}

Related Effects

Spinner / Loading Circle

A circular animated icon that rotates continuously, signaling that a process is underway. The most universally recognized loading indicator.

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.

Indeterminate Progress Bar

A loading bar where the indicator continually bounces back and forth or cycles infinitely, showing that a process is working but the exact completion time is unknown.