Spinner
Spinner cho biết hệ thống đang xử lý một tác vụ chưa rõ thời gian hoàn tất.
Dùng khi nội dung đang tải hoặc một hành động đang chờ phản hồi. Có 8 kích thước từ 16 tới 44px, nhãn đặt trước / sau / trên / dưới, và bản inverted cho nền tối hoặc nền brand.
Đang tải dữ liệu…
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 { Spinner } 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.
Kích thước
extra-tiny 16 → huge 44px.
Trước
Sau
Trên
Dưới
Vị trí nhãn
before, after (mặc định), above, below.
Đang gửi…
Inverted
Dùng trên nền brand hoặc nền tối.
Cách dùng
Nên
- Đặt Spinner gần vùng nội dung đang tải.
- Thêm nhãn ngắn mô tả việc đang làm khi chờ lâu hơn vài giây.
- Chọn kích thước tương xứng với vùng chứa (nút nhỏ → tiny, cả trang → large).
Không nên
- Không hiển thị nhiều Spinner cùng lúc trên một màn hình.
- Không dùng khi biết tiến độ — dùng ProgressBar.
- Không dùng bản inverted trên nền sáng.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| size"extra-tiny" | "tiny" | "extra-small" | "small" | "medium" | "large" | "extra-large" | "huge" | Mặc định: "medium" | 16 / 20 / 24 / 28 / 32 / 36 / 40 / 44px. |
| appearance"primary" | "inverted" | Mặc định: "primary" | Màu cung và rãnh. |
| labelReactNode | Mặc định: — | Nhãn (liên kết aria-labelledby). Không có nhãn → aria-label “Đang tải”. |
| labelPosition"before" | "after" | "above" | "below" | Mặc định: "after" | Vị trí nhãn. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.spinner
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| labelstring aria-label khi không có | Mặc định (tiếng Anh)"Loading" | messagesVi"Đang tải" |