旋转加载指示器Spinner
提示与状态反馈用持续旋转告诉用户:系统正在处理,请稍等
也常被叫作加载圈Loading Spinner
旋转加载指示器用于短暂且无法估算完成度的等待,常出现在提交按钮、局部内容刷新或弹窗处理中。旁边要说明正在做什么;等待变长时,还要给出取消、重试或失败结果,不能只让它一直转。
正在生成预览通常需要几秒钟,请不要关闭此页面
容易混淆?这样区分
旋转加载指示器Spinner≠进度条Progress
旋转加载指示器 Spinner 只说明系统仍在处理,不会显示完成了多少;进度条 Progress 用一条轨道展示任务的整体进展,能计算时还会显示比例。
旋转加载指示器Spinner≠骨架屏Skeleton
旋转加载指示器 Spinner 适合短暂、局部的等待;骨架屏 Skeleton 会用内容轮廓提前占好整块页面的位置。
什么时候用
- 按钮提交后的短等待:防止用户重复点击正在保存设置…
- 局部内容刷新:不打断用户正在看的页面正在保存设置…
- 无法计算总量的处理:说明正在做哪一步正在保存设置…
什么时候不用
- 已知文件大小或完成度 → 用 进度条 Progress正在保存设置…
- 整页内容的轮廓可以预测 → 用 骨架屏 Skeleton正在保存设置…
- 转很久却没有取消、失败或重试出口正在保存设置…
组成结构 · Anatomy
正在保存…
1旋转指示器Indicator持续运动,但不暗示虚假的完成比例
2状态文字Label告诉用户系统正在处理什么
常见变体 · Variants
按钮内In button
提交后锁定当前动作
局部加载Inline
正在刷新
列表或区域更新时
居中等待Centered
加载中
弹窗或空白面板处理中
典型使用场景
保存按钮
局部列表刷新
最近项目
弹窗处理中
正在导出报告请不要关闭窗口