progress要素の使い方

HTMLのprogress要素は、ファイルのアップロードや処理など、タスクがどこまで完了したかを表す要素です。

先に結論

最小の例

<label for="upload-progress">アップロードの進捗</label>
<progress id="upload-progress" max="100" value="65">65%</progress>

value="65"が現在の完了量、max="100"が全体の量です。単位はHTMLが決めるものではないので、この例ではパーセントとして扱っています。

実際に動かす

スライダーを動かすと、JavaScriptがprogress.valueを更新します。progress自体が処理を進めるわけではなく、アプリケーションが実際の進捗を計算して更新します。

valueとmax

maxはタスク全体の量、valueは現在までに完了した量です。maxを省略した場合の最大値は1です。たとえば、0から1までの割合として表すこともできます。

<progress max="1" value="0.5">50%</progress>
<progress max="10" value="3">3 / 10</progress>

valueは0以上、max以下の範囲で指定します。負の値や不正な数値を指定しても、それをそのまま意味のある進捗として扱えるわけではありません。

不定状態を表示する

<label for="waiting-progress">サーバーの応答を待っています</label>
<progress id="waiting-progress">処理中</progress>

value属性を省略すると、処理は進んでいるものの、完了までの量が分からない不定状態になります。value="0"は「全体が分かっていて、まだ0まで進んでいない」確定状態なので、同じ意味ではありません。

progress・meter・outputの違い

• progress — タスクがどこまで完了したか。
• meter — ディスク使用率や温度など、既知の範囲内にある測定値。
• output — 計算やユーザー操作の結果。

見た目が似ていても、意味が違います。タスクの完了を示すのか、状態を測るのか、結果を表示するのかで要素を選びます。

読みやすく、伝わりやすくする

• labelなどで、何の進捗かを説明する。
• 画面上の数字や単位が必要なら、progressの中のテキストや近くの説明にも記録する。
• ページの一部を読み込んでいる場合は、更新される領域の状態と進捗表示の関係を設計する。
• JavaScriptが失敗しても、処理の意味や初期状態が分かるようにする。

よくある間違い

• 完了値を更新せず、見た目だけのバーを作る。
• 全体量が不明なのに、適当なmaxを置いて確定状態にする。
• ディスク使用率などの測定値にprogressを使う。
• 数字だけを表示し、何の処理か説明しない。

Atlasで確認する

カテゴリ、content model、確定・不定状態、値の解決、HTMLProgressElement、アクセシビリティAPIの対応まで確認したい場合は、Yugien Atlasのprogress要素を参照してください。ラベルとの関係はAtlasのlabel要素、計算結果との違いはAtlasのoutput要素でも確認できます。