Top Loading Bar
Also called Page progress bar, NProgress
A thin bar at the top of the page creeps forward during navigation and finishes on load.
Use for
SPA route loading
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 "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.Similar motions
Determinate Progress Bar
Also called Progress bar fill, Progress Indicator, Progress bar, Circular progress
A bar fills from left to right in proportion to task completion.
Use for
Uploads, multi-step forms
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.Scroll inside
Scroll Progress Indicator
Also called Reading Progress Bar, Progress Bar
A bar or ring fills as the user scrolls through the page or article.
Use for
Articles, long-form pages
Add a "Scroll Progress Indicator" (also called a reading progress bar) to [where].
A thin bar along the top should fill from left to right in step with how far the reader has scrolled, reaching full width at the end.
Tie it directly to the scroll position with no easing lag, and keep it from covering the content.Indeterminate Linear Progress
Also called Indeterminate progress bar, Buffer bar
A bar segment sweeps repeatedly along a track when the duration is unknown.
Use for
Top-of-page or card loading
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.More in Loading & Progress
Typing Indicator
Also called Typing dots, Chat is typing
Three dots in a bubble pulse or rise in turn to show someone or an AI is composing.
Use for
Chat, AI assistants
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.Bar Loader (Equalizer)
Also called Bars loader, Audio bars
Vertical bars grow and shrink out of phase, like an audio equalizer.
Use for
Loading or now-playing indicators
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.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
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.