progress要素は作業の進捗状況を表す【HTML】

progress要素は作業やタスクの進捗状況を表すときに使えます。

対応しているブラウザ環境ではプログレスバーというのが表示されるので、一目でどれぐらい進んでいるかがわかります。

対応していない環境では表示されないので、その場合も考慮してprogress要素内にも代替コンテンツとなるテキストを記述することが推奨されています。

progress要素で使える属性

progress要素では以下のような属性が指定できます。

最大値、つまり作業が完了する値を指定し、その値に対して現在どれぐらい進んでいるかの数値を指定します。

まずはmax属性。この属性で完了となる値を指定します。

省略した場合は、初期値として「1.0」が適用されます。

maxで指定した最大値に対して、現状どれぐらい進んでいるのかを示すのに、value属性を使います。

value属性には現在の進捗状況を数値で指定し、当たりまえですが0以上でmaxで指定した値以下である必要があります。

作業完了まで！ 50%

実際にprogress要素で進捗状況を表してみました。

対応している環境ではプログレスバーが表示されているはずです。

このように、max属性で「100」を指定し、value属性で「50」を指定しているので、作業が現時点では50%完了しているということです。

ちなみにprogress要素は作業の進捗状況などに使えますが、ディスクの使用量だったり、人口の割合などを表したいときにはmeter要素を使います。