切换·Esc 返回

旋转加载指示器Spinner

提示与状态反馈
用持续旋转告诉用户:系统正在处理,请稍等
也常被叫作加载圈Loading Spinner

旋转加载指示器用于短暂且无法估算完成度的等待,常出现在提交按钮、局部内容刷新或弹窗处理中。旁边要说明正在做什么;等待变长时,还要给出取消、重试或失败结果,不能只让它一直转。

正在生成预览通常需要几秒钟,请不要关闭此页面
容易混淆?这样区分
旋转加载指示器Spinner进度条Progress

旋转加载指示器 Spinner 只说明系统仍在处理,不会显示完成了多少;进度条 Progress 用一条轨道展示任务的整体进展,能计算时还会显示比例。

旋转加载指示器Spinner骨架屏Skeleton

旋转加载指示器 Spinner 适合短暂、局部的等待;骨架屏 Skeleton 会用内容轮廓提前占好整块页面的位置。

什么时候用

  • 按钮提交后的短等待:防止用户重复点击
    正在保存设置…
  • 局部内容刷新:不打断用户正在看的页面
    正在保存设置…
  • 无法计算总量的处理:说明正在做哪一步
    正在保存设置…

什么时候不用

  • 已知文件大小或完成度 → 用 进度条 Progress
    正在保存设置…
  • 整页内容的轮廓可以预测 → 用 骨架屏 Skeleton
    正在保存设置…
  • 转很久却没有取消、失败或重试出口
    正在保存设置…
组成结构 · Anatomy
正在保存…
1旋转指示器Indicator持续运动,但不暗示虚假的完成比例
2状态文字Label告诉用户系统正在处理什么
常见变体 · Variants
按钮内In button
提交后锁定当前动作
局部加载Inline
正在刷新
列表或区域更新时
居中等待Centered
加载中
弹窗或空白面板处理中
典型使用场景
保存按钮
局部列表刷新
最近项目
弹窗处理中
正在导出报告请不要关闭窗口