组件 进程 & 活动

进程 & 活动

进度和活动指示器可以让用户直观的看到内容的加载进度。

每类操作只能由一个进度指示器来呈现。例如,刷新操作可用刷新进度条或者活动圈来指示,但两者不能同时使用。

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

模糊指示器无法显示具体的等待时间。

类型

线性
圆形

行为

分阶段加载内容
加载更多内容

指示器类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当指示器是精确的,它就可以显示出完成操作所需的时长。

当指示器是模糊的,它需要用户在等待的时候不需要在意会花多久。

无论是线性还是圆形指示器,都可以来表示精确和模糊的进度。

线性指示器

线性指示器应始终显示从 0% 到 100% 显示,不能反过来。指示器应当放置在头部或其他区域的边缘。

指示按顺序发生的多个操作时,使用指示器代表的是整体的进度,而不是每个单独操作的进度。

线性进度指示器

视频上的缓冲进度指示器

网页上的查询指示器

圆形指示器

圆形的精确和模糊进度的指示器

整合的圆形指示器

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

集成圆形指示器的动画

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

分段阶段

单段加载

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

两段加载

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

首次加载内容

一次性加载并显示出全部内容

加载附加内容

例 1:卡片展开

当卡片在较大的平面上展开时(比如桌面),推荐使用模糊的线形指示器。

例 2:向上滚动来加载更多

从底部加载列表时,推荐使用模糊的圆形指示器。

例 3:下拉刷新

当你想从上方加载一个列表时,推荐使用模糊的圆形指示器。