Blur-Up Placeholder
Also called LQIP, Blur placeholder, Progressive image load
A tiny blurred version of an image sits in place and sharpens as the full image loads.
Use for
Hero images, galleries
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
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.Similar motions
ABCD
Blur In
Also called Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
The element starts heavily blurred and sharpens into focus, often while sliding or fading in.
Use for
Headlines and hero text reveals
Add a "Blur In" entrance animation (also called text focus in, focus in or blur text reveal) to [where].
The content should start heavily blurred and transparent, then sharpen into focus in place: soft and fairly slow, with no movement.
Play it once, and show the text sharp right away when the user prefers reduced motion (prefers-reduced-motion).Skeleton Shimmer
Also called Skeleton wave, Shimmer effect, placeholder-wave
Gray placeholder shapes show a light highlight sweeping across them.
Use for
Content loading placeholders
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.Pulse Placeholder
Also called Skeleton pulse, placeholder-glow
Gray placeholder blocks fade in and out gently to signal loading.
Use for
Skeleton screens
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.ABCDEFGHIJKL
Scroll inside
Progressive Blur
Also called Gradient blur edge
Blur strength ramps gradually toward an edge so content fades out softly.
Use for
Scroll container edges, headers
Add a "Progressive Blur" edge (also called a gradient blur edge) to [where].
Content scrolling toward the edge should get gradually blurrier and softer, ramping smoothly instead of cutting off at a hard line.
Show the blur only at an edge that still has more content beyond it, and keep the blurred area from blocking clicks or scrolling.More in Loading & Progress
Bouncing Dots
Also called Dots loader, Ellipsis loader, Three-dot loader
A row of dots bounce, fade or scale in sequence.
Use for
Inline loading, chat waiting
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.Button Loading State
Also called Spinner button, Loading button, Button spinner, Submit loading state
A button swaps its label for, or adds, a small spinner while an action runs.
Use for
Form submit, async actions
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.Circular Spinner
Also called Spinner, Throbber, Circular indeterminate
A ring or arc rotates continuously to show that something is loading.
Use for
Buttons, page loads
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.