# Spinner
Chỉ báo đang tải theo motif trân châu: ba viên trân châu nảy lần lượt.

## Khi nào dùng
- Chờ một tác vụ ngắn, không biết trước thời lượng (tải dữ liệu, lưu).
- Biết tiến độ thì dùng Progress; chờ bố cục dài thì dùng Skeleton.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| md (mặc định) | `tt-spinner` | Viên 12px |
| sm | `tt-spinner tt-spinner--sm` | Viên 8px, đặt cạnh chữ hoặc trong nút |

## Cấu trúc
```html
<div class="tt-spinner" role="status">
  <span class="tt-spinner__pearl"></span><span class="tt-spinner__pearl"></span><span class="tt-spinner__pearl"></span>
  <span class="tt-spinner__label">Đang tải…</span>
</div>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Thường | Ba viên (`ink`, `pink`, `ink`) nảy 1s lệch .15s |
| `prefers-reduced-motion` | Không nảy, hiện chữ "Đang tải…" bên cạnh |

## Token sử dụng
`ink`, `pink`, `radius-round`, `space-4/6/8`.

## Khả năng tiếp cận
- `role="status"` + nhãn ẩn "Đang tải…" đọc cho screen reader.
- Giảm chuyển động: nhãn thành chữ nhìn thấy được.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt một spinner cho mỗi vùng đang tải | Đặt nhiều spinner chồng nhau |
| Đổi nhãn nếu cần rõ nghĩa ("Đang lưu…") | Để spinner chạy mãi không báo lỗi |

## Nguồn
Bổ sung có chủ đích: game không có spinner. Motif trân châu của tiệm; keyframes `tt-spinner-bounce`.