加载指示器
Loading Spinner
别名:加载图标转圈加载加载中图标转圈圈loading 转圈旋转加载
这是什么
用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用， 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌"，不表达进度多少，也不预告还剩多久。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 1～5 秒的短时等待（请求、提交、刷新）
- 按钮内联表示"点击已生效，处理中"
- 局部小区域加载，不值得整页骨架屏
✕ 不适用场景
- 超过 5～10 秒的等待（改用进度条）
- 首屏内容加载（改用骨架屏保布局）
- 无限旋转但任务可能失败（需可取消/可退出）
常见形式
圆环
Ring
部分弧线旋转，Material 风格
圆点跳动
Dots
三点波浪起伏，社交产品常用
双环
Dual ring
双层反向旋转，科技感更强
实现要点
@keyframes spinborder-radius: 50%border-top-color最简实现：直径 16～24px 的圆，边框 2～3px，只给顶部一个强调色边框， animation: spin 0.8s linear infinite。圆点版用三个圆 + 交错 animation-delay。 必须加 role="status" 与 aria-label="加载中"， 并尊重 prefers-reduced-motion（降级为呼吸透明度）。
横向对比
查看完整对比 →交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目中的异步按钮与局部区块统一加载指示器。 先检查现有 loading 组件与令牌，避免重复造轮子。 要求： - 16px 圆环指示器，0.8s 匀速旋转，颜色用强调色令牌 - 按钮场景禁用交互并锁定宽度防抖动 - 可访问性：role="status" + aria-label - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求