LOADING EFFECT

Dot wave.

Three small dots rise in a repeating sequence.

See the movement

Repeats while playing

Duration 1.05s

Playback starts only when you request it. Stop returns to the still illustration.

What it does

A wave of dots can signal typing or a short wait. Its meaning needs nearby context, and an indefinite typing state should not remain after the other person has stopped typing.

Timing curveease-in-out

Default duration1050ms

RepetitionWhile the state is active

Make the motion useful

Choose an effect that supports the component’s purpose. Keep the final state clear, preserve focus and reading order, and pair important feedback with a visible message.

CSS animation reference

TAKE THE MOVEMENT WITH YOU

Describe the effect.

Copy this into your next coding conversation, or pair it with a dictionary component.

Dot wave: Three small dots rise in a repeating sequence.
Animate three small dots with alternating vertical movement and opacity, staggering their starts. Pair them with a concise status such as “Typing” or “Working,” and stop the loop when that state ends.
Timing: 1050ms; easing: ease-in-out; repeat only while the relevant state is active.
Accessibility: respect prefers-reduced-motion with a static state or brief opacity-only change, and never rely on motion alone to convey meaning.

Find a component

For reduced motion, use a static state or a brief opacity change. Animation should never be required to understand the component.

See the movement

What it does

Make the motion useful

In the same family

Shimmer

Spin

Progress sweep