§15-04Perceived Performance
Progress bar (定量)
処理の進み具合を割合で示す。
時間のかかる処理がどこまで進んだかを伝える。アップロードや変換のように所要時間がある程度分かる処理に向く。
実装のポイント
進捗は role=progressbar と aria-valuenow/min/max で公開し、残り時間の目安を出すと待ちの不安が減る。100% 到達後は完了状態に切り替える。
- 特徴
- タイマー
- アニメーション
- デモで使っているもの
- shadcn/ui
- lucide-react