Spinner
加载转圈
WebMobileDesktop上手难度: 容易
一个不停转的圈，表示「正在加载，请稍等」。
Live Demo
真的可以点你刚才看到的这个：页面中间那个转圈的加载图标、点按钮后按钮里转的小圈、App 冷启动时的菊花。
它到底是什么
Spinner 是最简单也最容易被滥用的加载指示。它的最大问题是：它让页面「空」着，用户不知道会等多久，也不知道到底有没有开始。
转圈圈spinnerloading spinner加载动画loading菊花
Anatomy · 它由什么组成
Ring圆环
12–32px，2–3px 线宽
Rotation旋转
匀速 0.8s/圈
Container容器
按钮内或页面中央
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 等待时间短（<1 秒）且无页面结构变化 | 用 |
| 按钮内部的小范围加载 | 用 |
| 只是一个独立小部件在加载 | 用 |
| 等待超过 1 秒且有页面结构 | 不用 |
| 首次加载整个页面 | 不用 |
空页面 + 转圈 = 用户以为页面坏了。首次加载请用 Skeleton。
如果超过 10 秒还没结果，加一句「加载较慢，重试？」比继续转圈友好。
Similar Patterns
别搞混一句话区分：一个不停转的圈，表示「正在加载，请稍等」。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
按钮点击后显示 spinner 并禁用，文字替换为「保存中…」；页面级加载用 24px spinner 加一行「正在加载相册…」文案，超过 10 秒显示重试选项。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加载的时候显示个转圈。
改成这样说
加载态用 Spinner：SVG 圆环 0.8s linear 匀速旋转，按钮内 16px 且保持按钮宽度不变，页面级 24px + 「正在加载…」文案，超过 10 秒显示重试，reduced-motion 下改静态三点。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。