kaze風
Spinner
読み込み中を伝える小さな表示。色は周りの文字色を受け継ぐ。
プレビュー
読み込み中読み込み中読み込み中
使いどころ
使う場面
- いつ終わるかわからない短い待ち（保存中、同期中、送信中）を、小さく示す
- ボタンの中の処理待ちは Button の loading を使う（Spinner が先頭に入る）。文字の横や暗い背景の上にもそのまま置ける。色は周りの文字色を受け継ぐ
- size は置く場所に合わせる。文字の横や Button は sm（14px）、既定は md（18px）、領域の中央に置くなら lg（24px）
使わない場面
- ページやカードの形が決まっている読み込み。あとから出る内容と同じ形の Skeleton を使う
- 進み具合がわかる処理。Progress を使う
- 相手が入力中であることの表示。意味と読み上げが違うので TypingIndicator を使う
- 処理に失敗したときの説明。Alert を使う
使い方
<Spinner />
<Spinner size="sm" label="同期しています" />
<Button loading>保存中</Button>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 14 / 18 / 24px |
label | string | "読み込み中" | 読み上げ用の文言 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- role="status" が付き、表示されると label（既定は「読み込み中」）が控えめに読み上げられる。見た目の回転は読み上げられない
- 何を待っているかがわかるように、label は「請求書を送信しています」のように具体的にする
- prefers-reduced-motion では回転を止めず、2.4 秒に 1 周のゆっくりした動きにする
- Button の loading の中では、スピナー自体は読み上げず、ボタンの aria-busy で処理中を伝える
文言
- label は進行形で書く（「保存しています」「同期しています」）。「お待ちください」だけにしない