HTML5 & CSS3 リファレンス - <progress> （進捗状況（新））

<progress> * - 進捗状況（新）

■ 概要

項　　目	説　　明
記述形式	<progress>～</progress>
対応ブラウザー	H5+ / Fx6+ / Op11+ / Ch6+
種　　類（カテゴリー）	フロー・コンテンツ，フレージング・コンテンツ，パルパブル・コンテンツ
置ける場所	フレージング・コンテンツが記入できる場所
内包要素（コンテンツ・モデル）	フレージング・コンテンツ［ただし，progress要素を子孫に含まないこと］（コンテンツ・モデル: カテゴリー）

■ 解説

<progress> はどのくらい作業が進行しているのかという進捗状況を示します。　最大値を max とした現在の値 value を棒グラフなどで表します。　一般的にはプログレス・バーとして表示されます。

<progress>～</progress> の間には，<progress> に対応していないブラウザーのためのメッセージやプログレス・バーが示す値の説明などを記述します。　このテキストは，progress要素に対応したブラウザーでは表示されません。

■ 属性

種　　類	名　　称
【固有属性】	value, max *
【グローバル属性】	accesskey，class，contenteditable ， dir， hidden ，id， lang，spellcheck ，style， tabindex，title，translate
【ARIA role属性】で指定可能な値（役割）	progressbar （既定の役割のため指定対象外）
【ARIA aria-* 属性】で指定可能なもの	ARIA グローバル状態とプロパティ，指定可能な役割の任意の状態とプロパティ

■ CSSプロパティ

種　　類	名　　称
【よく使うもの】	color，background-color，font，font-size，font-family

■ 使用例

HTMLソース
CSS <head> ～ </head>	<script type="text/javascript"> <!-- window.onload = incValue; function incValue() { var o = document.getElementById('prog1'); if (o.value == 100) { o.value = 0; } else { o.value += 10; } window.setTimeout("incValue()", 1000); } // --> </script>
HTML <body> ～ </body>	<progress id="prog1" max=100 value=0></progress>

HTMLソース

CSS
<head> ～ </head>

<script type="text/javascript">
<!--
window.onload = incValue;
function incValue() {
    var o = document.getElementById('prog1');
    if (o.value == 100) {
        o.value = 0;
    } else {
        o.value += 10;
    }
    window.setTimeout("incValue()", 1000);
}
// -->
</script>

HTML
<body> ～ </body>

<progress id="prog1" max=100 value=0></progress>