组件 进度与活动状态

进度与活动状态

进度和活动指示器是应用加载内容时的视觉提示。

每个操作应只使用一种视觉指示器。例如,刷新操作应显示刷新条或圆形活动指示器,但不能同时显示两者。

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

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

类型

线性
圆形

行为

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

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:下拉刷新

当从上方刷新列表时,推荐使用带径向反馈的不确定进度圆形指示器。