進捗バー
Progress bar処理の完了度合いを、確定した割合として横棒の塗りつぶしで示す進捗表示UI。
○ 使う場面
- アップロードやインストールなど、残量・進捗の割合をあらかじめ算出できる処理のとき
- あとどれくらいで終わるかを、ユーザーに具体的な数値で伝えたいとき
× 避ける場面
- 処理量が事前にわからず、割合そのものを算出できないとき（→ローディングスピナー）
- 読み込み後のレイアウトを先に見せて体感速度を上げたいとき（→スケルトンスクリーン）
別名
プログレスバー、プログレスインジケーター、進捗表示
近縁種との比較
「プログレスバー」という名前は文字通り、処理の“進捗（progress）“を横棒（bar）の伸び具合という単純な視覚指標に置き換えたもので、割合という抽象的な数値をひと目でわかる長さの変化に翻訳する発想が、そのまま名称になっている。
| 近縁種 | 違い・使い分け |
|---|---|
| ローディングスピナー | 進捗バーとローディングスピナーは同じ「処理中」を示すフィードバックUIだが、進捗の割合を算出できる確定的な処理（determinate）には進捗バー、算出できない不定長の処理（indeterminate）にはローディングスピナーを使うという区別が定番の使い分けで、処理の途中で割合が判明すれば不定表示から確定表示へ切り替えることもある。 |
| スケルトンスクリーン | スケルトンスクリーンは割合を示さない点でローディングスピナーに近いが、読み込み後のレイアウトの形を先に予告する点で進捗バー・ローディングスピナーいずれとも異なる役割を持つ。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション