WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <progress>「進捗状況」

<progress> 「進捗状況」[読み方:プログレス]

<progress>タグは、タスクの進捗状況をプログレスバーで表示します。
非対応のブラウザのために、<progress>~</progress>内に進捗状況を代替えコンテンツとして記載することが推奨されています。

HTML規格HTML4.01HTML5
使用可否×
<progress>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<progress> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
フレージングコンテンツを子要素にもてる場所フレージングコンテンツ
<progress>は不可
不可

<progress> の属性

【構文】
<progress value="80" max="100">80%</progress>
属性意味値のサンプルなど
value="数値"タスクの進捗度を示す値「80」
max="数値"タスクの全体量を示す値
※デフォルト=1
「100」
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<progress>タグのサンプル

確定プログレスバーのサンプル
<p>ダウンロードの進捗:
<progress value="50" max="100">50% </progress>

ダウンロードの進捗: 50%


未確定プログレスバーのサンプル
<p>ダウンロードの進捗:
<progress max="100">待機中</progress>

ダウンロードの進捗: 待機中


ページTOP

JavaScriptを使用したサンプル

進捗度に対応してプログレスバーが変化するサンプル
(進捗度をカウントアップしてプログレスバーの動きを表現しています)
<script>
function js1(){
// 進捗が100%の場合、0%に戻す
var gage = document.getElementById('prg1');
if (num.value == 100) {
num.value = 0;}
// 関数js2()を100ミリ秒間隔で呼び出す
timer1=setInterval("js2()",100);
}
function js2(){
var bar = document.getElementById('prg1');
var txt = document.getElementById('pct');
// 進捗が100%未満の場合、1ずつカウントアップ
if (bar.value < bar.max) {
bar.value++;
txt.value = bar.value;
} else{
clearInterval(timer1);
}}
</script>

<p>ダウンロードードの進捗:
<progress id="prg1" value="0" max=100">0%</progress>
:<output id="pct">0</output>%</p>
<input type="button" value="ダウンロード開始" onclick="js1()">

ダウンロードードの進捗: 0%0

ページTOP

留意事項

  • <progress>タグは、ディスクの使用量など特定範囲内の測定値を表す場合は使用しません。この場合は、<meter>を使用します。
  • 各属性へは、下記の関係式が成り立つ値を設定します。
    ◆value≦max
  • valueの指定がない場合、待機状態(未確定プログレスバー)となります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン