Typing Indicator

A row of dots bounce, fade or scale in sequence.

Add "Bouncing Dots" (also called a dots loader or three-dot loader) to [where].
The dots should hop up and land one after another in a light, springy rhythm, with a short rest before the sequence repeats.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.

Characters appear one at a time as if typed, usually followed by a blinking caret.

Add a "Typewriter" effect (also called typing animation or typing text) to [where].
The characters should appear one at a time at a steady typing pace, with a caret right after the last typed character that blinks a few times once typing is done.
Play it once rather than looping, let screen readers read the full text right away, and show the full text 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.

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.

A tiny blurred version of an image sits in place and sharpens as the full image loads.

Add a "Blur-Up Placeholder" image loading effect (also called LQIP or a blur placeholder) to [where].
A tiny, heavily blurred version of the image should fill the image's space right away, and once the full image has loaded it should sharpen into place smoothly and fairly quickly.
Reserve the image's exact size so nothing shifts when it arrives, and clip the blurred edges so they do not bleed past the frame.