スピナー
Spinner
別名: ローディングインジケーター、ローディングスピナー、くるくる、ロードインジケーター、Spinner、Loading indicator、Loader
生態（さわってみる）
一言定義
処理時間や進捗の割合がわからない不定長の待機状態を、回転するアニメーションで示すフィードバックUI。
分類
使う場面
- 処理にかかる時間や進捗の割合が、あらかじめわからないとき
- ボタン内など、局所的に短時間の待機状態を示したいとき
避ける場面
- 進捗の割合を算出でき、具体的な数値で示せるとき（→プログレスバー）
- 読み込み後のレイアウトの形をあらかじめ予告したいとき（→スケルトンスクリーン）
近縁種との比較
プログレスバーとスピナーは同じ「処理中」を示すフィードバックUIだが、進捗の割合を算出できる確定的な処理（determinate）にはプログレスバー、算出できない不定長の処理（indeterminate）にはスピナーを使うという使い分けが定番である。スケルトンスクリーンは「まだ何もわからない」ことだけを抽象的に示すスピナーと異なり、読み込み後のレイアウトの形をあらかじめ見せて体感速度を上げる。読み込み中であることを示す本エントリと、結果が0件だと確定した後に出すエンプティステートは、「結果が確定する前か後か」という一点で明確に区別される。
実例リンク
アクセシビリティ
- role
- role="status"を持つ領域の中に置き、視覚的に隠したテキスト（visually-hidden）で「読み込み中」であることを伝える。回転アニメーション自体はaria-hidden="true"の装飾として扱う
- キーボード操作
- 通常は操作を伴わない表示専用要素で、Tabストップにはしない
- 補足
- prefers-reduced-motionが有効な環境では回転アニメーションを止め、テキストまたは静的な表示で代替する。role="status"の性質により表示の開始・終了がスクリーンリーダーに伝わる