プログレスバー

出典: フリー百科事典『ウィキペディア(Wikipedia)』
プログレスバーの一例
プログレスバーのアニメーション

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

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

不定状態[編集]

タスク完了までの処理量や時間が予測できないなど、タスクの進行の割合を表すことができない状況で使用される場合、一定幅のカラーバーが全体のバー内を繰り返し移動するアニメーションといったような、「不定(未定)プログレスバー」(: indeterminate)として表示される[1][2]。このバーは進行の総量(サイズ)がいっぱいになるのを示すのではなく、現在進行中であることを示す動きとしてインジケーターの役割を兼ねた働きをしている。Microsoft Windowsでは、この表示状態をマーキースタイル(: marquee style)と呼ぶこともある[3]Microsoft Windows 8Modern UIスタイルでは、不定状態を表すのにいくつかのドット(点)の集団がバーの領域内を繰り返し移動するアニメーションが使われることもある[4][5]

派生ウィジェット[編集]

macOSiOSAndroidMicrosoft Windows 8[4]などでは、プログレスサークル: progress circle)やスピニングプログレスインジケーター: spinning progress indicator[6]プログレスリング: progress ring[7]プログレススピナー: progress spinner[8]のように、進捗率表示や不確定状態のアニメーションが円環(円グラフ)や数珠のような形状で表示されるものもある。プログレスバーよりも占有面積が小さくて済むため、特に画面の小さいモバイル環境で多用されている。

なお、macOSのスピニング待機カーソル: spinning wait cursor[9]や、Microsoft Windows Vista以降の待機カーソル[10]は、円形のデザインのアイコンがアニメーションすることにより、システムやアプリケーションがビジー状態であることを示すようになっているが、これらはかつて砂時計のデザインのアイコンが使われていたものであり、プログレスリングやプログレススピナーが登場するよりもずっと早い段階で円形のデザインとなっていた。

HTML5[編集]

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

脚注[編集]

[脚注の使い方]

関連項目[編集]