<>Progress Indicators là các thành phần hiển thị trạng thái tiến trình của một tác vụ để người dùng biết rằng hệ thống đang hoạt động và cần chờ đợi.
🚀 Mục tiêu chính:
✅ Cung cấp phản hồi trực quan về tiến trình.
✅ Giảm cảm giác chờ đợi và tăng sự tin tưởng của người dùng.
✅ Hướng dẫn người dùng về thời gian hoàn thành của một tác vụ.
/Phân loại Progress Indicators
1. Indeterminate Progress Indicators (Không xác định) ⏳
👉 Khi không biết chính xác thời gian hoàn thành.
👉 Ví dụ: Loading spinner, thanh tiến trình nhấp nháy.
✅ Phù hợp cho các tác vụ có thời gian xử lý không cố định, như tải dữ liệu từ server.
🔹 Ví dụ UI thực tế:
🔄 Spinner: Xuất hiện khi ứng dụng đang tải nội dung động.
📡 Loading bars (thanh nhấp nháy): Khi tải dữ liệu từ API nhưng chưa xác định được phần trăm.
2. Determinate Progress Indicators (Xác định) 📊
👉 Khi có thể ước lượng thời gian hoàn thành.
👉 Ví dụ: Thanh tiến trình hiển thị phần trăm hoàn thành.
✅ Phù hợp với quá trình có thể đo lường được, như tải xuống file hoặc cài đặt ứng dụng.
🔹 Ví dụ UI thực tế:
📂 Thanh tải file: “Tải xuống 75% – Còn 10s”.
🛠️ Cài đặt phần mềm: “Đang cài đặt 50%”.
3. Linear Progress Indicators (Dạng thanh) 📏
👉 Thanh ngang hoặc dọc di chuyển để hiển thị tiến độ.
✅ Phù hợp với quá trình có thể đo lường được và đơn giản.
🔹 Ví dụ UI thực tế:
– Thanh hiển thị phần trăm tải xuống trên YouTube.
– Thanh tiến trình khi đăng tải ảnh lên mạng xã hội.
4. Circular Progress Indicators (Dạng tròn) 🔵
👉 Biểu tượng xoay vòng hoặc vòng tròn hiển thị tiến độ.
✅ Phù hợp cho tác vụ nhanh hoặc thời gian không xác định.
🔹 Ví dụ UI thực tế:
Spinner tải trang khi mở ứng dụng.
Hiệu ứng vòng tròn khi xử lý ảnh.
5. Step Progress Indicators (Tiến trình theo bước) 🪜
👉 Hiển thị từng bước của một quy trình.
✅ Phù hợp với biểu mẫu nhiều bước (multi-step forms), thanh toán, onboarding.
🔹 Ví dụ UI thực tế:
🔄 Checkout e-commerce: Bước 1: Giỏ hàng → Bước 2: Thanh toán → Bước 3: Xác nhận đơn hàng.
📝 Đăng ký tài khoản: Bước 1: Nhập email → Bước 2: Xác nhận OTP → Bước 3: Hoàn tất.
/Best Practices khi thiết kế Progress Indicators
✅ Cung cấp phản hồi rõ ràng → Tránh để người dùng bối rối về thời gian chờ đợi.
✅ Dùng hiệu ứng nhẹ nhàng → Không nên quá giật lag hoặc gây khó chịu.
✅ Hiển thị ước tính thời gian hoàn thành (nếu có thể) → Giúp người dùng kiểm soát kỳ vọng.
✅ Tích hợp hành động tiếp theo → Ví dụ: Hiển thị nút “Hủy” hoặc hướng dẫn tiếp theo.
✅ Tránh sử dụng quá mức → Loading liên tục có thể gây ức chế nếu không cần thiết.
