HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<progress>
プログレス（Progress）要素。タスクの完了度や進捗状況を示すために使用されます。
info
概要
<progress> 要素は、特定のタスクがどれだけ完了したか（例：ファイルのダウンロード、フォームの完了）を示すための進捗インジケーター（プログレスバー）を作成します。
この要素は、タスクの完了度合いが既知の場合に使用します。完了度が不明な場合は、代わりにローディングスピナーなどのアニメーションを $\text{CSS}$ で作成することが一般的です。
play_circle
デモ (静的表示)
HTML (Source)
<label for="file-upload">ファイルのアップロード中...</label>
<progress id="file-upload" max="100" value="75">
75%
</progress>
<p>
<label for="unknown-progress">処理を実行中... (進捗不明)</label>
<progress id="unknown-progress">
処理中...
</progress>
</p>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| max | タスクの完了に必要な総作業量を示す数値（浮動小数点数）です。デフォルト値は $\text{1.0}$ です。 |
| value | タスクの完了済み作業量を示す数値（浮動小数点数）です。この値は $\text{0}$ 以上、かつ $\text{max}$ 属性の値以下でなければなりません。 |
code
実用例
1. フォームの完了度を表示
<label for="form-complete">フォーム完了度 6/10</label>
<progress id="form-complete" max="10" value="6"></progress>
2. 既知の進捗状況 (パーセンテージ)
<p>ファイルのダウンロード状況: 75%</p>
<progress max="100" value="75">75%</progress>
3. 不確定な進捗状況（ローディング）
<!-- value属性を省略すると、ブラウザはアニメーションするプログレスバー（ローディング）として表示します -->
<label for="indeterminate">通信待機中...</label>
<progress id="indeterminate">通信中</progress>
lightbulb
知っておくべき重要事項
palette
スタイリングに関する注意
<progress> 要素の見た目を完全にカスタマイズするのは難しく、ブラウザごとに挙動が異なります。$\text{CSS}$ の $\text{-webkit-progress-*}$ や $\text{-moz-progress-*}$ のようなベンダープレフィックスが必要となるか、または $\text{CSS}$ の $\text{::after}$ 擬似要素などを使って代替表現を行う必要がある場合があります。
accessibility_new
アクセシビリティ
進捗バーには、関連する情報（例: $\text{75\%}$ 完了）をテキストとして隣接させるか、
進捗バーには、関連する情報（例: $\text{75\%}$ 完了）をテキストとして隣接させるか、
<label> 要素で関連付けることが強く推奨されます。特に不確定な進捗状況の場合は、スクリーンリーダーに内容を伝えるために子ノードにテキストを含めるべきです。