进度和活动指示器是应用加载内容时的视觉提示。
每个操作应只使用一种视觉指示器。例如,刷新操作应显示刷新条或圆形活动指示器,但不能同时显示两者。
确定进度的指示器可以显示操作将花费的时间。
不确定进度的指示器只显示等待的状态,没有具体时间。
类型
线性
圆形
行为
分阶段加载内容
加载其他内容

每个操作应只使用一种视觉指示器。例如,刷新操作应显示刷新条或圆形活动指示器,但不能同时显示两者。
确定进度的指示器可以显示操作将花费的时间。
不确定进度的指示器只显示等待的状态,没有具体时间。
线性
圆形
分阶段加载内容
加载其他内容

当可以检测到完成部分的百分比时,确定进度的指示器可以显示一项操作还需花费的时间。
在无法得知已完成部分进度的情况下,不确定进度的指示器可以显示一个等待中的状态,不需要指示出还需多久才能完成。
无论是线性进度指示器还是圆形进度指示器,都可以指示确定进度和不确定进度的操作。
线性进度指示器应始终从 0% 填充至 100%,且数值不应减少。它应表现为位于标题栏或面板边缘的条状,并会出现和消失。
对于顺序发生的<strong>多个操作</strong>,使用指示器表示整个进度,而不是每个单独操作的进度。
线性进度指示器
视频上的缓冲进度指示器
网页上的查询进度指示器
圆形的确定和不确定进度指示器
圆形指示器可以和浮动操作按钮集成。
集成的圆形指示器的动画
加载阶段
单阶段加载
内容(文本和图片)加载到现有的、不变的容器中。
双阶段加载
先生成容器,然后加载内容(文本和图片)。
第一次加载内容
一次性加载完所有内容并显示出来。
加载额外的内容
例 1:卡片展开
当卡片在较大的平面上展开时(比如桌面端),推荐使用不确定进度的线性进度指示器。
例 2:上拉加载更多
当从底部加载列表时,推荐使用带初始径向反馈的不确定进度圆形指示器。
例 3:下拉刷新
当从上方刷新列表时,推荐使用带径向反馈的不确定进度圆形指示器。