プログレスバー()とは、長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもので、グラフィカルユーザインタフェース (GUI) の要素(ウィジェット)の一つである。しばしば、ダウンロードやファイル転送のようにパーセント形式で表示される際に使われる。プログレスメーター()とも呼ばれる。

プログレスバーの外観形態としては、左から右へ満たされていく水平方向のバーで進捗率を表すものがよく使われている。

不定状態 タスク完了までの処理量や時間が予測できないなど、タスクの進行の割合を表すことができない状況で使用される場合、一定幅のカラーバーが全体のバー内を繰り返し移動するアニメーションといったような、「不定(未定)プログレスバー」()として表示されるWindows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > 進行状況バー, Internet ArchiveProgress Bars - Win32 apps | Microsoft Docs。このバーは進行の総量(サイズ)がいっぱいになるのを示すのではなく、現在進行中であることを示す動きとしてインジケーターの役割を兼ねた働きをしている。Microsoft Windowsでは、この表示状態をマーキースタイル()と呼ぶこともあるAbout Progress Bar Controls - Win32 apps | Microsoft Docs。Microsoft Windows 8のModern UIスタイルでは、不定状態を表すのにいくつかのドット(点)の集団がバーの領域内を繰り返し移動するアニメーションが使われることもあるプログレス コントロールのガイドライン - Windows app development, Internet ArchiveProgressBar Class (Windows.UI.Xaml.Controls) - Windows UWP applications | Microsoft Docs。

派生ウィジェット macOS、iOS、AndroidやMicrosoft Windows 8などでは、プログレスサークル()やスピニングプログレスインジケーター()Progress Indicators - Indicators - macOS - Human Interface Guidelines - Apple Developer、プログレスリング()Guidelines for progress controls - Windows apps | Microsoft Docs、プログレススピナー()Progress spinner | Angular Materialのように、進捗率表示や不確定状態のアニメーションが円環(円グラフ)や数珠のような形状で表示されるものもある。プログレスバーよりも占有面積が小さくて済むため、特に画面の小さいモバイル環境で多用されている。例えば複数のファイルのアップロード/ダウンロードの進捗率や、複数のアプリのインストール/アップデートの進捗率をコンパクトに個別表示するのに都合がよい。

なお、macOSのスピニング待機カーソル()Apple Human Interface Guidelines (2008-06-09), Internet Archiveや、Microsoft Windows Vista以降の待機カーソルAbout Cursors - Win32 apps | Microsoft Docsは、円形のデザインのアイコンがアニメーションすることにより、システムやアプリケーションがビジー状態であることを示すようになっているが、これらはかつて砂時計のデザインのアイコンが使われていたものであり、プログレスリングやプログレススピナーが登場するよりもずっと早い段階で円形のデザインとなっていた。なお、Windowsではマウスのプロパティのデザイン設定を変更することで、Vista以降であっても待機カーソルを従来の砂時計アイコンなどにしたり、ユーザーが用意したカーソル画像を設定したりすることもできる富士通Q&A - [Windows Vista] マウスポインタのデザインを変更する方法を教えてください。 - FMVサポート : 富士通パソコンASCII.jp:派手に動いて音までなるマウスカーソルに変身させる (1/2)。待機カーソルはビジーカーソルまたはビジーポインターとも呼ばれる。Windowsのデスクトップユーザーエクスペリエンスガイドラインでは、動作が完了するまでユーザーが1秒以上待機しなければならない場合、ビジーポインター(IDC_WAIT)を表示するよう指定されている。バックグラウンドで作業が進行中で、他に完了までの視覚的フィードバックを提供する手段がない場合は、矢印アイコンと小さなビジーアイコンが組み合わされたポインター(IDC_APPSTARTING)を表示する。これらの活動状況を示すポインターはプログレスバーやプログレスアニメーションと組み合わせてはいけないとされているWindows 7 Mouse and Pointers - Win32 apps | Microsoft Learn。

HTML5 HTML5では多数のユーザーインターフェイス要素が新たに標準化されたが、プログレスバーもprogress要素として追加された。

脚注

注釈

出典

関連項目

グラフィカルユーザインタフェース (Graphical User Interface: GUI) ロード (コンピュータ) 進捗インジケータ :en:Spinning pinwheel - 風車の形状で回転するmacOSの待機カーソル :en:Windows wait cursor