English
VietnameseArk Progress
Component Progress chuẩn hóa theo Ark UI (@ark-ui/react/progress) kết hợp Tailwind CSS v4. Hỗ trợ đầy đủ thanh tiến trình tuyến tính (Linear), hình tròn (Circular), nhãn, giá trị phần trăm, trạng thái indeterminate và đồng bộ hệ thống kích thước với Input / Button.
Điều khiển tương tác
Giá trị: 65%65
Các kích thước (Sizes)
Các kích thước xs, sm, md, lg, xl với chiều cao track và cỡ chữ cân đối.
Kích thước XL65%
Đồng bộ kích thước với Input và Button
Sử dụng design tokens chung (controlSizeVariableClassNames) giúp ArkProgress hiển thị hài hòa hoàn hảo khi đặt cùng hàng với Input và Button.
Size xs:
Size sm:
Size md:
Size lg:
Màu sắc (Variants)
Đầy đủ các biến thể màu ngữ nghĩa phù hợp cho thông báo thành công, cảnh báo, lỗi hoặc tiến độ thông thường.
Ark UI Composition (Compound Components)
Sử dụng các component con ArkProgress.Root, ArkProgress.Track, ArkProgress.Range, ArkProgress.Label, ArkProgress.ValueText, ArkProgress.View để tùy biến tự do.
Tiến độ dạng hình tròn (Circular Progress)
Ark UI Progress hỗ trợ cả SVG circular track và range mượt mà với tính toán offset tự động theo bán kính.
xs
sm
md
lg
65%
Trạng thái không xác định (Indeterminate)
Khi value={null}, cả Linear và Circular Progress đều tự động chuyển sang hiệu ứng động mượt mà.
Linear Indeterminate:
Circular Indeterminate: