Spinner
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
Live Demo
Actually clickableWhat you just saw:The spinning loading icon in the middle of the page, the little circle inside a button after you tap it, the spinner on a cold app launch.
What it actually is
A spinner is the simplest loading indicator and the most overused one. Its biggest problem is that it leaves the page empty: users have no idea how long they will wait, or whether anything has even started.
Anatomy · What it's made of
Ring圆环
12–32px, 2–3px stroke width
Rotation旋转
Constant speed, 0.8s per revolution
Container容器
Inside the button, or centered in the page
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The wait is short (<1s) and the page structure does not change | Yes |
| A small, contained load inside a button | Yes |
| A single isolated widget is loading | Yes |
| The wait exceeds 1 second and there is page structure to show | No |
| It is the first load of a whole page | No |
An empty page plus a spinner reads as a broken page. Use a skeleton for first loads.
If there is still no answer after 10 seconds, "This is taking longer than usual — retry?" is kinder than another second of spinning.
Similar Patterns
Don't mix these upSpinnerCurrent
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
In one line:A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Spinner
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
How to tell AI
Three levels of promptAdd the component name and specifics
After a button is tapped, show a spinner and disable it, replacing the label with "Saving…". For page-level loading use a 24px spinner with a line reading "Loading your photos…", and after 10 seconds offer a retry.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show a spinner while loading.
Say this instead
Use a spinner for loading: an SVG ring rotating at 0.8s linear, 16px inside a button with the button width unchanged, 24px with "Loading…" text at page level, a retry option after 10 seconds, and static dots under reduced-motion.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.