本文へ移動

§15-04Perceived Performance

Progress bar (定量)

処理の進み具合を割合で示す。

時間のかかる処理がどこまで進んだかを伝える。アップロードや変換のように所要時間がある程度分かる処理に向く。

実装のポイント

進捗は role=progressbar と aria-valuenow/min/max で公開し、残り時間の目安を出すと待ちの不安が減る。100% 到達後は完了状態に切り替える。

特徴
  • タイマー
  • アニメーション
デモで使っているもの
  • shadcn/ui
  • lucide-react