Bouncing Dots

Three dots in a bubble pulse or rise in turn to show someone or an AI is composing.

Add a "Typing Indicator" (also called typing dots) to [where].
Dots inside a small chat bubble should rise and brighten one after another in a soft, gentle rhythm while the other side is composing.
Keep the loop seamless, remove the bubble as soon as the message arrives, and give screen readers a short status text instead of the dots.

Vertical bars grow and shrink out of phase, like an audio equalizer.

Add a "Bar Loader (Equalizer)" loading animation (also called a bars loader or audio bars) to [where].
A few vertical bars should stretch and shrink out of step with each other like an audio equalizer, at a lively but even pace.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.

Letters bob up and down in sequence, creating a wave running through the word.

Add a "Wavy Text" effect (also called text wave) to [where].
The letters should bob up and down one after another so a gentle, smooth wave keeps running through the word.
Loop it seamlessly, keep it read as one word by screen readers, and stop the wave for users who prefer reduced motion.

A button swaps its label for, or adds, a small spinner while an action runs.

Add a "Button Loading State" (also called a spinner button or loading button) to [where].
When pressed, the button should give a small press, fade its label out and show a small spinner in its place while the action runs, then bring the label back when it finishes.
Keep the button's width fixed while it loads, block repeat presses, and announce the busy state to screen readers.

A ring or arc rotates continuously to show that something is loading.

Add a "Circular Spinner" (also called a spinner or throbber) to [where].
An arc should rotate steadily around a faint ring while it stretches longer and shorter, smooth and continuous.
Keep the rotation seamless, give it a loading label for screen readers, and slow or stop it for users who prefer reduced motion.

A bar fills from left to right in proportion to task completion.

Add a "Determinate Progress Bar" (also called a progress bar fill or progress indicator) to [where].
The bar should fill from left to right in step with the real progress, easing smoothly between updates, with the percentage shown beside it.
Use proper progress bar semantics with current, minimum and maximum values so screen readers can read it, and never let the fill move backwards.