Loading & Progress

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.

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.

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.

A bar segment sweeps repeatedly along a track when the duration is unknown.

Add an "Indeterminate Linear Progress" bar (also called an indeterminate progress bar) to [where].
A short segment should sweep along the track from one end to the other again and again, quick and smooth, while the length of the task is unknown.
Let the segment enter and leave the track completely so the loop has no visible seam, and mark it as a busy progress bar for screen readers.

A list of steps highlights or checks off one by one as a long task advances.

Add a "Multi-Step Loader" (also called a step loader or checklist loader) to [where].
The steps should light up one at a time from top to bottom, and each should get a small checkmark that pops in as it completes, at a calm, readable pace.
Advance the steps with the real task progress rather than a fixed timer, and announce each completed step to screen readers.

A circular arc grows around a ring to show percentage complete.

Add a "Progress Ring" (also called circular progress or radial progress) to [where].
Starting at the top, an arc should grow clockwise around the ring to show the percentage complete, easing out as it settles, while the number in the center counts up alongside it.
Keep the arc and the number in sync, and expose the value with proper progress bar semantics for screen readers.

Gray placeholder blocks fade in and out gently to signal loading.

Add a "Pulse Placeholder" (also called a skeleton pulse) to [where].
Gray placeholder blocks shaped like the coming content should slowly fade lighter and back together in a gentle, steady rhythm.
Match the placeholders to the real layout so nothing jumps when the content arrives, and keep them still for users who prefer reduced motion.

Gray placeholder shapes show a light highlight sweeping across them.

Add a "Skeleton Shimmer" (also called a skeleton wave or shimmer effect) to [where].
A soft band of light should sweep across the gray placeholder shapes from left to right and pause briefly before the next pass: smooth and unhurried.
Match the placeholder shapes to the real layout so nothing jumps when the content loads, and show static placeholders to users who prefer reduced motion.

A thin bar at the top of the page creeps forward during navigation and finishes on load.

Add a "Top Loading Bar" (also called a page progress bar) to [where].
A thin bar along the top edge should dart forward at first and then creep more and more slowly while the page loads; when loading finishes it should race to the end and fade out.
Never let it reach the end before loading is actually done, and keep it from covering or shifting the page content.

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.