progress - タスクが完了するまでの進捗

progress要素は、タスク完了までの進行状況を示す際に使用します。

progress要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
progress - - - - - - -

progress要素のHTML4からHTML5への変更点

value属性、max属性を利用することで、タスクの進行状況を指定することはできますが、
progress要素をサポートしていないユーザーエージェント向けに、progress要素の中にも、テキストで進行状況を記述することが推奨されます。

※ディスク使用量の表示など、何かを計測するのにはmeter要素が適切です。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
value タスクがどれだけ完了した値
max タスクが完了するために必要な値の合計
form フォームと関連付けるid名を指定

「静的な状態(本来であればJavascriptで動的に制御するべきです)」のサンプル

HTMLコード

<section>
<p>進行状況:<progress value="50" max="100">現在、ダウンロード中です。</progress></p>
</section>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「静的な状態(本来であればJavascriptで動的に制御するべきです)」のサンプルプレビューを確認

「擬似的に動的に制御」のサンプル

HTMLコード

<section>
<p>進行状況:<progress id="progress" value="0" max="100">現在、ダウンロード中です。</progress></p>
<script>
var bar = document.getElementById("progress");
var pId = setInterval("updateProgress()",100);
function updateProgress(){
  if(bar.value<=bar.max){
    bar.value++;
  }else{
    clearInterval(pId);
  }
}
</script>
</section>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「擬似的に動的に制御」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100304/forms.html#the-progress-element)