Loading Spinner
加载指示器
Aliases:加载图标转圈加载加载中图标转圈圈loading 转圈旋转加载
What is it
A continuously rotating ring or dots that says "work in progress". Tiny in footprint and universally understood, it fits inside buttons, cursors or small regions as lightweight feedback. It communicates busyness only — neither progress amount nor time remaining.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Short waits of 1–5 seconds — requests, submits, refreshes
- Inline in a button to confirm the click registered
- Small local regions where a full skeleton is overkill
✕ When not to use
- Waits beyond 5–10 seconds — use a progress bar
- Initial content loads — skeletons preserve layout
- Potentially failing tasks — spinner alone offers no escape
Variants
Ring
圆环
Partial arc rotating — Material style
Dots
圆点跳动
Three dots waving — social products' favorite
Dual ring
双环
Two counter-rotating rings — more techy
Implementation
@keyframes spinborder-radius: 50%border-top-colorSimplest recipe: a 16–24px circle with a 2–3px border where only the top arc takes the accent color, animated with `spin 0.8s linear infinite`. The dots variant staggers animation-delay across three circles. Always add role="status" with an aria-label, and respect prefers-reduced-motion (fall back to a gentle opacity pulse).
Compare
Full comparison →| Loading Spinner加载指示器 | Progress Bar进度条 | Skeleton Loading骨架屏 | |
|---|---|---|---|
| Interruption | Low — minimal footprint | Low — inline, hides nothing | Low — layout unchanged |
| Information volume | Low — busyness only | Medium — shows proportion remaining | Low — structure only |
| Suitable duration | 1–5 seconds | 3+ seconds, determinate | 1–3 seconds |
| Result consistency | Low — no shape of the result | High — must reflect real progress | High |
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Unify the loading indicator for async buttons and local regions in the project. Check existing loading components and tokens first; don't reinvent. Requirements: - 16px ring, 0.8s linear spin, accent token color - In buttons: disable interaction and lock width to prevent shift - Accessibility: role="status" + aria-label - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
Grey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsAlternativeA loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsAlternativeA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsApplies to