FEEDBACK & OVERLAY
加载指示器Spinner / Loader
转圈、跳点、翻方块——等待超过 300ms 就该给用户一个"正在干活"的信号。
效果预览
适合用在哪
按钮内、页面局部加载、全屏遮罩加载。
容易踩的坑
- 请求不足 300ms 也立即显示 spinner，界面一闪而过反而让人觉得卡顿。
- spinner 没有 role="status" 和隐藏文字「加载中」，读屏用户只感到页面没反应。
- 全屏遮罩加载期间屏蔽所有操作超过 3 秒，却不给进度或取消入口。
设计提示词 · Prompt
加载指示器（Spinner / Loader）：三种基本款——旋转环（border 圆环 + 单边着色 + rotate 800ms linear）、跳点（3 个圆点依次 bounce，间隔 120ms）、翻转方块（rotateY 连续翻）。尺寸 16-24px，颜色继承文字色。使用规则：≤300ms 的请求什么都不显示（闪一下反而烦）；300ms-3s 用局部 spinner；>3s 或有明确进度用进度条；全屏加载配骨架屏而不是居中大转圈。按钮内的 spinner 替换原图标，宽度不变。
Spinner / Loader: three basic styles — rotating ring (border circle + one colored side + rotate 800ms linear), bouncing dots (3 dots bouncing in sequence, 120ms apart), flipping square (continuous rotateY). Size 16-24px, color inherits the text color. Usage rules: show nothing for requests ≤300ms (a brief flash is more annoying); use a local spinner for 300ms-3s; use a progress bar for >3s or when progress is known; for full-screen loading use a skeleton screen rather than a big centered spinner. A spinner inside a button replaces the original icon, keeping the width unchanged.
常见搭配
同一页面里经常和「加载指示器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-loaders"> <span class="d-loader d-loader--ring"></span> <span class="d-loader d-loader--dots"><i></i><i></i><i></i></span> <span class="d-loader d-loader--bar"><i></i></span> </div>