Danh mục Progress cung cấp hai loại phần tử — một loại dành cho tiến trình theo bước qua nhiều màn hình trong flow, và một loại dành cho bộ chỉ báo đ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

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

Trạng thái bước

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.

Cài đặt Duration của loader điều khiển độ dài animation quay hoặc điền của nó, không phải thời gian màn hình hiển thị. Trigger On screen appear với action Navigate to screen sẽ chuyển màn hình ngay lập tức mà không chờ loader. Để giữ màn hình tải trong tối đa 5 giây, hãy thêm Delay vào chuyển màn hình của action đó. Nếu cần chờ lâu hơn, hãy thêm Timer với trigger On timer end để điều hướng sang màn hình tiếp theo. Thời gian của Timer được đặt theo giây nguyên.

Giữ nguyên Visibility ở chế độ Show trên bộ đếm ngược, để trigger On timer end của nó có thể kích hoạt. Để ẩn bộ đếm ngược khỏi tầm nhìn, hãy đặt màu chữ hoàn toàn trong suốt hoặc cùng màu với nền.