---
title: "进度指示器与加载动画"
description: "在流程中显示步骤进度和加载状态。"
---

**Progress** 分类提供两种元素类型——一种用于在多屏幕流程中显示步骤进度，另一种用于原位加载状态指示。
## 进度指示器 \{#progress-indicators\}

### 进度条样式 \{#indicator-styles\}

**Progress** 元素用于显示用户在多屏流程中的当前位置。该类别提供三种视觉样式：

- **Linear** — 单条进度条，随用户前进而填充。
- **Segmented** — 每步对应一段独立的进度条，逐步填充。
- **Connectors** — 带标签的圆圈通过连线串联（例如，依次显示 Step 1、Step 2、Step 3）。
### 将步骤与屏幕对应 \{#match-steps-to-screens\}

默认情况下，进度指示器会追踪流程中的每个屏幕。若只想追踪其中几个屏幕，可在 **Screens** 下拉菜单中选择。也可以打开想要排除的屏幕，取消勾选 **Include screen in progress indicator** 复选框。

如果需要更精细地控制步骤数量，可以关闭 **One segment per screen** 开关。
:::warning
步骤位置取决于屏幕列表中的顺序，而非用户实际浏览的顺序。在非线性流程中，指示器显示的步骤编号可能会跳跃或倒退。
:::
### 步骤状态 \{#step-states\}

每个步骤都有三种状态——**Completed**、**Current** 和 **Upcoming**。在进度指示器中选择某个步骤，即可在右侧面板中编辑该状态的样式。使用 **Apply changes to all states** 可将当前编辑同步到另外两种状态。

修改某个步骤会影响同一指示器内的所有步骤。
## 加载动画 \{#loaders\}

**加载动画（Loader）** 是一种动态元素，用于提示用户当前正在处理某项任务，例如：正在分析用户的问卷答案以生成个性化方案。

该分类提供三种模板：

- **Spinner** — 圆形旋转加载动画。
- **Spinner with label** — 带说明文字的圆形旋转加载动画（例如："Loading..."）。
- **Loader** — 随进度填充的横向进度条。
{/* - **Loader with label** — A horizontal bar with a caption and percentage (e.g., "Analyzing... 47%"). */}
:::warning
加载器需要通过**触发器**来控制显示和隐藏。请打开 **Interactions** 标签页来设置相关逻辑——例如，在用户提交测验后显示加载器。
:::