<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; 現在の値を指定します。

使用例

HTML

<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>

表示

リンク

Copyright (C) 2011-2017 杜甫々

初版:2011年6月11日最終更新:2017年12月31日

https://www.tohoho-web.com/html/progress.htm