<progress>: PROGRESS 要素

最終更新：2026-10-13

<progress>PROGRESS 要素

value/max でタスクの完了度（アップロードや読み込みなど）を表示します。value を省略すると不確定な進捗アニメーションになります。

カテゴリ	フォーム
コンテンツモデル	フローコンテンツ
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</progress>` タグ
ステータス	標準

📝 構文

<progress value="70" max="100">70%</progress>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`value`		Amount completed; omit for indeterminate progress.
`max`		Total task amount, default 1.

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<progress>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： progress はタスクの進捗用です。固定範囲の測定には <meter> を使いましょう。

❓ よくある質問

Qprogress に value を書かないとどうなりますか？

Avalue を書かないと「不確定の進捗」（indeterminate）を意味します。ブラウザは左右に動くアニメーションを表示し、「処理中だが割合は不明」の場面に向いています。value（0〜max の範囲）を書けば、確定した進捗バーになります。

Qprogress の max 属性のデフォルトはいくつですか？

Aデフォルトの max は 1 で、このとき value='0.5' が 50% を意味します。max='100' に変更すれば、value に 0〜100 の数字を直接書けるので、意味が分かりやすくなります。value が max を超えると max にクランプされます。

Qprogress のスタイルはカスタマイズできますか？

Aできますが、ベンダー接頭辞付きの疑似要素が必要です。WebKit は progress::-webkit-progress-bar と progress::-webkit-progress-value、Firefox は progress::-moz-progress-bar を使います。ブラウザ横断で統一して美しくするコストは高めなので、複雑な要件なら CSS で自作する進捗バーも検討しましょう。