<progress> - 進捗状況

• トップ
• HTMLリファレンス
• <progress>

• 概要
• 説明
• 属性
• 使用例
• リンク

概要

形式

<progress>～</progress>

サポート

https://caniuse.com/progress

カテゴリ

フローコンテンツ

フレージングコンテンツ

ラベラブル

パルパブルコンテンツ

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

フレージングコンテンツ (progress要素を子孫に持つことはできない)

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

value

max

説明

progress は進捗状況を示します。最大値を max とした現在の値 value を棒グラフなどで表します。<progress>～</progress> の間には、<progress> に対応していないブラウザのためのメッセージや代替内容などを記述します。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

max=n

LS/H5/e/Ch/Fx/Sa/Op

最大値を指定します。

value=n

LS/H5/e/Ch/Fx/Sa/Op

現在の値を指定します。

使用例

<script>
window.addEventListener('load', () => {
    window.setInterval(function() {
        var o = document.getElementById('prog1');
        o.value = (o.value == 100) ? 0 : o.value + 10;
    }, 200);
});
</script>
<progress id="prog1" max=100 value=0></progress>

リンク

• https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/progress
• https://caniuse.com/progress