Components Thinking dots

Thinking dots

The AI “thinking” indicator — three primary dots that spring individually between the points of a triangle while a response streams in. Used inside the Joey chat bubble and any future AI waiting state.

<koala-thinking-dots>

Canonical

<koala-thinking-dots />

Three full-brand dots that spring from one triangle point to the next, each on its own staggered cycle driven by a damped-spring linear() curve. Full primary colour throughout — the motion carries the life, not opacity.

In a chat bubble

<div class="bg-surface-recessed rounded-md px-4 py-3 flex items-center">
    <koala-thinking-dots size="Default" />
    <span class="sr-only">Joey is responding…</span>
</div>

How Joey renders it while a reply streams. Pair the dots with an sr-only label so the wait is announced to screen readers.

Variants

5 sizes

Extra small

size="ExtraSmall"

Small

size="Small"

Default

size="Default"

Large

size="Large"

Extra large

size="ExtraLarge"

Size — pass size for any of the five steps. Defaults to Small, sized for an inline chat bubble.

<koala-thinking-dots size="Default" />

Props

2 attributes

Attribute	Values	Notes
size	ExtraSmall, Small, Default, Large, ExtraLarge	Defaults to `Small`.
class	Tailwind utilities	Passed through to the outer element for layout (e.g. margins).

Do & don't

Do Use it for an AI generating a response, and give it an sr-only label so the wait is announced.

Don't Don't use it for ordinary AJAX waits — that's the round koala-spinner's job. These dots specifically read as an AI thinking.