---
title: "Thanh tiến trình và loader"
description: "Hiển thị tiến trình từng bước và trạng thái bận trong một flow."
---

Danh mục **Progress** cung cấp hai loại phần tử — một loại theo dõi tiến trình từng bước qua flow nhiều màn hình, và một loại hiển thị trạng thái đang xử lý tại chỗ.

## Thanh tiến trình \{#progress-indicators\}

### Kiểu hiển thị \{#indicator-styles\}

Phần tử **Progress** hiển thị vị trí của người dùng trong một flow nhiều màn hình. Danh mục này có ba kiểu hiển thị:

- **Linear** — Một thanh đơn tự điền khi người dùng tiến lên.
- **Segmented** — Các thanh riêng biệt cho từng bước, điền lần lượt.
- **Connectors** — Các vòng tròn có nhãn nối với nhau bằng đường thẳng (ví dụ: Bước 1, Bước 2, Bước 3 theo thứ tự).

### Khớp bước với màn hình \{#match-steps-to-screens\}

Mặc định, thanh tiến trình theo dõi tất cả màn hình trong flow. Để giới hạn chỉ theo dõi một số màn hình, chọn từ dropdown **Screens**. Hoặc, mở màn hình bạn muốn loại trừ và bỏ chọn ô **Include screen in progress indicator**.

Tắt **One segment per screen** nếu bạn cần kiểm soát chi tiết hơn số bước hiển thị.

:::warning
Vị trí bước được xác định theo danh sách màn hình — không phải theo thứ tự người dùng thực sự xem. Trong các flow không tuyến tính, bước hiển thị trên thanh tiến trình có thể nhảy lên hoặc lùi lại.
:::

### Trạng thái bước \{#step-states\}

Mỗi bước có ba trạng thái — **Completed**, **Current**, và **Upcoming**. Chọn một bước bên trong thanh tiến trình để chỉnh kiểu dáng của từng trạng thái trong bảng bên phải. Dùng **Apply changes to all states** để sao chép chỉnh sửa sang hai trạng thái còn lại.

Chỉnh sửa một bước sẽ ảnh hưởng đến tất cả các bước trong cùng một thanh tiến trình.

### Bố cục và vị trí \{#layout-and-positioning\}

Thanh tiến trình là phần tử toàn cục, nên bạn không thể đặt nó bên trong một [container](builder-containers). Bạn cũng không thể tự đặt vị trí cho nó — nó dùng định vị tuyệt đối theo mặc định. Khi người dùng cuộn màn hình, thanh tiến trình giữ nguyên vị trí còn nội dung cuộn bên dưới.

Để kiểm soát khoảng cách xung quanh thanh tiến trình, dùng các điều khiển **Margin** và **Padding** trong phần **Spacing** thay vì di chuyển phần tử. Nếu bố cục trông không ổn, hãy điều chỉnh margin hoặc padding trên cả thanh tiến trình lẫn phần tử liền kề.

## Loader \{#loaders\}

**Loader** là phần tử có animation gợi ý rằng hệ thống đang xử lý gì đó: ví dụ, xử lý câu trả lời quiz của người dùng để chuẩn bị kế hoạch cá nhân hóa.

Danh mục này có ba mẫu:

- **Spinner** — Vòng tròn xoay.
- **Spinner with label** — Vòng tròn xoay kèm chú thích (ví dụ: "Loading...").
- **Loader** — Thanh ngang điền dần khi công việc tiến triển.
{/* - **Loader with label** — A horizontal bar with a caption and percentage (e.g., "Analyzing... 47%"). */}

:::warning
Loader cần có **trigger** để xuất hiện và biến mất. Mở tab **Interactions** để thiết lập logic này — ví dụ, hiển thị loader sau khi người dùng gửi quiz.
:::