组件 进度 & 活动状态

进度 & 活动状态

进度和动效可以让用户清楚地看到应用内容的加载情况。

每次操作只能由一个进度指示器来呈现。例如,对于刷新操作,你可以使用刷新条或者动态圆圈来表示,但不能同时使用这两者。

确定进度的指示器可以显示操作将花费的时间。

不确定进度的指示器只显示等待的状态,没有具体时间。

类型

线性
圆形

行为

分阶段加载内容
加载其他内容

Material Design 中的进度和动效显示加载状态

指示器类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

当可以检测到完成部分的百分比时,确定进度的指示器可以显示一项操作还需花费的时间。

在无法得知已完成部分进度的情况下,不确定进度的指示器可以显示一个等待中的状态,不需要指示出还需多久才能完成。

无论是线性进度指示器还是圆形进度指示器,都可以来指示确定进度和不确定进度的操作。

线性进度指示器

线性进度指示器应始终从 0% 到 100% 显示,不能从高到低反向显示。线性进度指示器应放置在头部或某块区域的边缘。

对于顺序发生的<strong>多个操作</strong>,使用指示器表示整个进度,而不是每个单独操作的进度。

线性进度指示器

视频上的缓冲进度指示器

网页上的查询进度指示器

圆形进度指示器

圆形的确定进度和不确定进度的指示器

与其他控件整合的圆形进度指示器

圆形指示器可以和浮动操作按钮集成。

集成的原型指示器的动画

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

加载阶段

单阶段加载

在已存在的、不变的容器里加载内容(副本和图片)

双阶段加载

先生成一个容器,然后再加载内容(副本和图片)。

第一次加载内容

一次性加载完所有内容并显示出来。

加载额外的内容

例 1:卡片展开

当卡片在一个较大的平面上展开时,比如桌面,推荐使用不确定进度的线性进度指示器。

例 2:上拉加载更多

当你想从底部加载列表时,推荐使用不确定进度的圆形进度指示器。

例 3:下拉刷新

当你想从上方加载一个列表时,推荐使用不确定进度的圆形进度指示器。