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
Variants
- border spinner
- dashed arc
- dual ring
- orbit dots
- infinity loop
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 "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.Similar motions
Spin
Also called Rotate Loop, Spinner
The element rotates continuously at constant speed.
Use for
Loading spinners
Add a "Spin" effect (also called a spinner or rotate loop) to [where].
The element should rotate continuously at a constant, even speed, with no easing between turns.
Make the loop seamless, give the spinner an accessible loading label, and slow or stop it for users who prefer reduced motion.Progress Ring
Also called Circular progress, Radial progress, Animated Circular Progress Bar
A circular arc grows around a ring to show percentage complete.
Use for
Uploads, goals, timers
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.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.Drag to play
Pull to Refresh
Also called Swipe to refresh
Dragging a list down reveals a spinner and reloads the content on release.
Use for
Feeds, inboxes
Add a "Pull to Refresh" interaction (also called swipe to refresh) to [where].
When the list is pulled down from the top it should follow the finger with some resistance and reveal a spinner that turns as it is pulled; on release the spinner keeps spinning while the content reloads, then the list slides smoothly back up.
Only start it when the list is already scrolled to the top, and give keyboard and screen reader users a regular refresh control too.More in Loading & Progress
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.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.Multi-Step Loader
Also called Step loader, Checklist loader
A list of steps highlights or checks off one by one as a long task advances.
Use for
AI generation, onboarding processing
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.