界面与交互 · 反馈与临时层
加载器Spinner
表示短时或未知时长等待的小圆环指示器，必须配文字、防重复提交，并在完成或失败后消失。
加载器：转着的小圆环 + 一句在做什么
点「生成周报」，看小圆环出现在周报卡上、配「生成中」文字、按钮禁用防重复点击；完成时圆环消失、结果长在卡片上；切「长等待」看文字厚度差异，切「模拟失败」看停止旋转 + 重试，切「减少动效」看圆环静态化但状态文字仍在。
周报生成 · 实验台状态：未开始
—尚未生成 · 点下方按钮开始
原因：尚未发起。下一步：点「生成周报」，周报卡上会出现小圆环和「生成中」文字，按钮同时禁用以防重复点击。
知识点总结
把刚才面板里能直接看到的规律命名下来。
- 小圆环只表示「在动」：圆环不报完成度——刚才面板里它只转圈，没有百分比；要报完成度用 progress。
- 必须配文字说明在做什么：短等待配「生成中」即可，长等待补「正在汇总 7 天数据…约需几秒」，不能只留一个光秃秃的圈。
- 结果长在物件上：完成时圆环消失、周报卡显示真实内容；失败时圆环停止、显示原因——不只靠页脚一句文案。
- 加载中防重复提交：按钮在 busy 时禁用，避免连点发出多次相同请求。
- 尊重减少动效：圆环可停止旋转，但状态文字、按钮文案和 live region 仍把「在动 / 完成 / 失败」说清楚，信息不依赖动画。
什么时候用加载器
从等多久、能不能算出进度来判断；不是所有等待都该用 spinner。
- 适用：短时（约 3 秒内）或未知时长的局部等待——按钮内提交、快速刷新、卡片内即时请求。
- 改用 progress：等待较长且能算出完成度（导入、上传、安装），给百分比和剩余比无限转圈更安心。
- 改用骨架屏：等待的是「即将到来的整块内容」（文章、列表、卡片），用骨架给出形状预览，而不是一颗抽象的圈。
- 不要单独用：超过 3 秒仍只转圈、无文字、无进度，用户会以为卡死；至少补一句在做什么。
怎么把加载器做对
从开始到判断的最短操作链。
- 视觉：用 CSS 边框圆环（
border-radius:50%+ 顶弧异色 +animation:rotate），只动transform，不引发布局抖动。 - 语义：容器给
aria-busy="true"，状态变化写进role="status"的 live region；圆环本身aria-hidden，避免读屏念出无意义符号。 - 文字：圆环旁永远有一句在做什么；短等待一句标签，长等待补「约需几秒」或改用 progress。
- 结束条件：完成（圆环消失 + 结果出现）和失败（圆环停止 + 原因 + 重试）是两个明确终态，绝不无限转下去。
- 减动效：同时实现
prefers-reduced-motion媒体查询和运行时开关，停止旋转后用文字继续承载状态。
正反例：同一个生成任务要不要给文字 + 失败要不要停
目标都是「告诉用户在等待」，只改一处——是否给文字、失败后是否停止。
正例
圆环配「生成中…」文字，完成时消失、失败时停止并提供重试：用户知道在做什么、何时结束。
反例
光秃秃转圈、无文字、失败后仍无限旋转：用户不知在做什么、分不清是卡死还是在动。
快速自测
「生成周报」点下去已过 5 秒还没返回，最合适的反馈是什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。