Design Atlas
한국어
✧ AI interface patterns

Typing indicator

타이핑 인디케이터

Three bouncing dots signaling the other side is "typing" before any response text has arrived.

Also known as: Three dotsWaiting indicator
···
html
<div class="chat"><div class="bubble" id="b"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div>
css
.chat{width:min(260px,90%)}
.bubble{display:inline-flex;gap:5px;align-items:center;padding:12px 16px;border-radius:14px;border-bottom-left-radius:4px;
  background:var(--surface);border:1px solid var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bounce 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

Borrowed from messaging apps. It's such a well-learned signal in chat UIs that it reads as "something is coming" without any label. In LLM chat, it fills the gap between the request being received and the model actually starting to generate the first token.

It comes before streaming, not alongside it — the typing indicator is a placeholder for "no text exists yet," and the instant the first token lands, the dots are swapped for streaming text. If that handoff isn't smooth (dots vanish, a blank beat appears), it reads as a stall, so keep the dots and the text in the same bubble with no layout jump between them.

If the dots sit alone for more than a few seconds, people start suspecting it's stuck. Past that point it's better to hand off to a "thinking" label or a step list — see thinking-indicator and agent-status.

When to use

Good when the first token is typically 1–3 seconds away. For longer waits — tool calls, file analysis — showing what is actually happening builds more trust than dots alone.