Thanh tiến trình và loader

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

Kiểu hiển thị

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

Bảng cài đặt thanh tiến trình với bộ chọn biến thể, nút bật/tắt One segment per screen, và dropdown 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ị.

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

Bảng cài đặt cấp bước với ID, Screens, và các tab trạng thái Completed/Current/Upcoming

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í

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. 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

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 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.