Yugen UI

ProgressBar

ProgressBar cho biết tiến độ của một tác vụ đang chạy, dạng xác định (biết phần trăm) hoặc không xác định.

Dùng cho tác vụ kéo dài hơn vài giây như tải tệp, cài đặt, đồng bộ. Khi biết tổng khối lượng, truyền value (0 → max); nếu chưa biết, bỏ value để thanh chạy liên tục. Màu ngữ nghĩa (success/warning/error) chỉ dùng để báo kết quả, luôn kèm chữ mô tả.
Đang tải tệp lên
6 / 10 tệp · còn khoảng 1 phút

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { ProgressBar } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Đang đồng bộ thư mục…

Không xác định

Bỏ value khi chưa biết tổng thời gian.

Màu, độ dày & hình dạng

thickness medium (2px) / large (4px); shape rounded / square. Không có label thì đặt aria-label.

Báo cáo Q3.pdf
0%

Cập nhật theo thời gian

Đổi sang success khi hoàn tất và cập nhật mô tả tương ứng.

Cách dùng

Nên
  • Kèm nhãn mô tả tác vụ và (nếu được) thời gian / số lượng còn lại.
  • Dùng dạng xác định ngay khi biết tổng khối lượng công việc.
  • Chuyển màu success / error khi tác vụ kết thúc, kèm chữ giải thích.
Không nên
  • Không dùng cho tác vụ dưới 1–2 giây — dùng Spinner hoặc không hiển thị gì.
  • Không cho thanh lùi lại hay đứng yên lâu ở 99%.
  • Không dùng màu làm tín hiệu duy nhất cho lỗi.

Props

Prop · KiểuMặc địnhMô tả
valuenumberMặc định: —Giá trị 0 → max. Bỏ trống = indeterminate.
maxnumberMặc định: 1Giá trị tối đa.
thickness"medium" | "large"Mặc định: "medium"Độ dày 2px / 4px.
shape"rounded" | "square"Mặc định: "rounded"Bo tròn hay vuông hai đầu.
color"brand" | "success" | "warning" | "error"Mặc định: "brand"Màu thanh tiến độ.
label / descriptionReactNodeMặc định: —Nhãn phía trên và mô tả phía dưới (tự gắn aria).
rootClassNamestringMặc định: —Class cho khối ngoài khi có label / description.