[57] プログレスバー（進捗状況）を出そう progress要素

<progress>要素は作業の進捗状況を示す要素で「プログレスバー」を出します。
<output>や<meter>と同じく 表示をする 役目。これもHTML5 からの新要素です。

<meter>と違って静的な状況を示すのではなく、ページやファイルのロード状況とか、ファイルのアップロードの状況などの、動的な進捗状況を示すのに使います。

こんなかんじ。

＊実際のページのロードに連動してません。動きを見せるために 1〜100までカウントしてるだけ。

Loading : Loading... :

0

％

使用する要素	<progress> 〜 </progress>

<progress>の属性	value：完了した量を表す。デフォルトは0.0〜1.0
	max：トータルの量を指定
	form：親の<form>のID名を呼び出して関連づける
	グローバル属性

value属性と max属性の約束事

value属性と max属性、どちらも0以上の数値を使います。マイナスはNG。進捗状況だからね。
value属性のデフォルトは0.0から1.0。小数もOKってことね。
max属性があれば、value属性の値も max属性の値まで。逆にmax属性が無ければ、maxの値は1.0。
max属性は、0より大きい値でなければダメ（0じゃダメ）。

●サンプル1
静的なサンプルですが、value属性と max属性の指定によるプレビューです。

max値は全部 100にしています。
value値（これは実際には JavaScript によって変動するのですが）は、
上から、0、50、100。4番目は value属性が無い（または取得できない）状態のサンプルです。

0%（0%）
50%（50%）
100%（100%）
0%（未確定）

<label ><progress value="0" max="100"><span>0</span>%</progress> （0%）</label >
<label ><progress value="50" max="100"><span>50</span>%</progress> （50%）</label >
<label ><progress value="100" max="100"><span>100</span>%</progress> （100%）</label >
<label ><progress max="100"><span>0</span>%</progress>（未確定）</label >

<progress>〜</progress>の間に、未対応ブラウザでも進捗を把握できるように、現在値と最大値をテキストで表示する事が推奨されてます。
<progress>に対応しているブラウザでは、この内容は表示されません。

で、具体的な使い方は …プログラマーのかたにお任せで〜す ヽ(´ー｀)ノ

プログラマーの方なら、Javascriptで進捗の数値を取得して <progress>要素に表示させるのは簡単なんでしょうね。（未消化でゴメン！）

プログレスバーの サンプルコード が W3Cの<progress>のページ（EXAMPLE 56）にありましたので、一応ご参考までに貼っときます。

＊この例では updateProgress() メソッドを、同じページの「別コード」から呼び出せば、タスクの進捗に従って プログレスバーを更新する、と説明されています。

<section>
  <h2>Task Progress</h2>
  <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
  <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
  </script>
</section>

おまけサンプル

ということであんまり役に立たないけど、冒頭の <progress>を javaScriptで動かしてみたサンプルのソースを一応書いとくね。
value値を 1ずつ足しただけ。<output>要素も使ってみましたよ。

Loading : Loading... :

0

％
　

Loading : <progress id="prog" max="100" value="0">Loading...</progress>
 : <output id="outp">0</output>％<br>
<input type="button" value="リロードして確認" onClick="location.reload(); return false;">

<script>
  var pbar = document.getElementById('prog');
  var ptxt = document.getElementById('outp');
  var pup = setInterval("upPrgrss()",100);
  function upPrgrss(){
    if(pbar.value<=pbar.max){
    pbar.value++;       /*「++」で 1 ずつ足してます*/
    ptxt.value = pbar.value;
    }else{
    clearInterval(pup);
    }
}
</script>

次回予告

次回は <keygen>要素です。これは、シリアルナンバーとかCDキーとかを生成する役目だそうで、HTML5からの新要素です。
（注：この <keygen>要素は HTML5.2 で削除されました。2018年3月記）