适合于整页或页面模块内的数据加载,体现系统的运转状态。

通用原则

  • 设定加载的上线时间,超过上限时间需给用户明确反馈加载慢的原因,以缓解用户等待的焦虑和迷失
  • 页面模块内使用时,均为非模态的加载方式,加载过程不打扰用户,无需让用户等待加载完才进行其他操作

行为

  • 前置条件:进入新页面、点击刷新按钮或点击某个操作按钮后,处于等待异步数据或正在渲染过程时会触发加载组件,允许多个加载同时出现。
  • 当加载超过上限时间时,需同时给出反馈,告诉用户加载慢的原因
  • 加载成功后则显示加载结果
  • 入场动效时间保持在 200~300ms

效果

CleanShot 2021-01-14 at 11.25.25.gif