@ark-ui/react + Tailwind CSS v4

Progress - Circular

Bộ demo bám theo examples của Ark UI: basic, controlled, indeterminate, initial value, min/max, RootProvider và label.

Basic

Cấu trúc cơ bản với Root, Circle, CircleTrack, CircleRange và ValueText.

42%

Giá trị được quản lý bằng React state và cập nhật qua thanh trượt.

42%

Giá trị: 42

Dùng value=null khi chưa thể xác định phần trăm hoặc thời gian hoàn tất.

•••

Không xác định thời gian hoàn tất

Khởi tạo tiến độ một lần bằng defaultValue.

68%

defaultValue=68

Ark UI tự quy đổi value trong miền min/max thành phần trăm hiển thị.

50%

min: 10value: 20max: 30

useProgress tạo progress API bên ngoài và truyền vào RootProvider.

24%

Progress.Label bổ sung nhãn ngữ nghĩa và nội dung mô tả rõ ràng.

Tiến độ tải dữ liệu

42%