§15-03Perceived Performance
Spinner
処理中であることを回転するアイコンで示す。
待っている間に反応がないと感じさせない。数秒以内に終わる短い処理に向き、長い処理には進捗バーなど見通しの示せるものを使う。
実装のポイント
短い待ちでは 300ms 程度遅らせてから表示し、ちらつきを防ぐ。role=status と視覚的に隠した「読み込み中」テキストを添えて読み上げさせる。
- 特徴
- CSS のみ
- アニメーション
- デモで使っているもの
- shadcn/ui
- lucide-react
- SVG
- ソース
- spinner.tsx