正在进入 VibeHub 实训中心…/ 正在加载 AI 实战词典、互动闯关与三分钟配方
旋转加载指示器Spinner
你可能会说
加载慢的时候给个转圈的东西，不然用户以为坏了。
旋转加载指示器是用持续旋转表示系统正在处理、但完成度未知的状态组件点击保存后短暂等待时，可在按钮旁显示旋转指示器并说明“正在保存”。等待过长时不能只让它旋转，应提供取消、重试或失败结果。
也常被叫作加载圈Loading Spinner
你可以这样告诉 AI Agent
保存操作开始后，请在当前按钮显示 Spinner 和“保存中”，禁用重复点击；成功或失败后恢复按钮并显示结果。模拟两秒等待和一次失败，确认不会重复发请求且两种结果都可见。
容易混淆？这样区分
旋转加载指示器Spinner≠进度条 Progress
旋转加载指示器 Spinner 只说明系统仍在处理，不会显示完成了多少；进度条 Progress 用一条轨道展示任务的整体进展，能计算时还会显示比例。
旋转加载指示器Spinner≠骨架屏 Skeleton
旋转加载指示器 Spinner 适合短暂、局部的等待；骨架屏 Skeleton 会用内容轮廓提前占好整块页面的位置。
什么时候用
- 按钮提交后的短暂等待：避免重复提交正在保存设置…
- 局部内容刷新：不打断用户浏览页面正在保存设置…
- 无法计算总量的处理：同时说明当前任务正在保存设置…
什么时候不用
- 已知文件大小或完成度：使用 进度条 Progress正在保存设置…
- 整页内容轮廓可预测：使用 骨架屏 Skeleton正在保存设置…
- 长时间等待却没有取消、失败或重试入口正在保存设置…
组成结构 · Anatomy
正在保存…
持续运动，但不暗示不存在的完成比例
说明系统正在处理的任务
常见变体 · Variants
按钮内In button
提交后暂时锁定当前操作
局部加载Inline
正在刷新
列表或区域更新时
居中等待Centered
加载中
弹窗或空白面板处理中
典型使用场景
保存按钮
局部列表刷新
最近项目
弹窗处理中
正在导出报告请不要关闭窗口
延伸阅读 · 权威出处
快速练习