HTML5 progressの組込み

HTML5よりprogressタグが追加された。このprogressタグはタスクの進行状況を示す要素である。ブラウザのサポート状況は次のとおりである。

ブラウザ サポート
Internet Explorer10 ○
Firefox 8.0 ○
Opera 11.6 ○
Chrome 16.0 ○
Safari 5.1 ×

progressタグの属性

  • value=”完了したタスク量”
  • max=”トータルのタスク量”
  • form=”form要素のID”

進行状況の表示を動的に変化させるには、javaScriptでvalueの値を変化させることが必要である。

試したソースコード

<form action="#" name="form1">
<input type="button" value="開始" onClick="Progress()">  
</form> 
<section>
<p>進行状況：<progress id="progress" value="0" max="100"></progress></p>
<script>
var bar = document.getElementById("progress");
var pId;
function Progress(){
  pId = setInterval("updateProgress()",200);
}
function updateProgress(){
  if(bar.value<bar.max) {
    bar.value+=2;
  }else{
    clearInterval(pId);
  }
}
</script>
</section>

ソースコード実行結果

進行状況：

IE10未満ではprogressタグはサポートしていないが、progress.jsを使ってprogressタグと同様なことができる。参考はここです。