HTML5 進捗状況を表示するプログレスバーを使ってみる



HTML5から作業の進捗状況を表示するのが簡単なプログレスバーのタグが実装されました。
プログレスバーの説明と使い方の紹介を致します。

下記はサンプルです。1秒間に1%ずつ上がっていきます。

Progress: 0)%

サンプルコード
<p>
	Progress: <progress value="0" id="p" max=100></progress>
	(<span id="pv" style="color:#00b200">0</span>)%
</p>
<script>
	// オブジェクトの取得
	var progressBar = document.getElementById('p');
	var progressValue = document.getElementById('pv');

	// プログレスバーの値を増やす
	function updateProgress(newValue) {
		if(newValue > 100){
			return;
		}
		progressBar.value = newValue;
		progressValue.innerHTML = newValue;
		// 1秒後に1増やして実行
		setTimeout(function(){updateProgress(newValue+1);}, 1000);
  }
updateProgress(0);
</script>

使用するタグ
<progress>~</progress> タグ内の「~」の位置に値を入れるとprogressタグが未対応のブラウザの時に表示されます。

属性
属性
value 完了した量を表す。
デフォルトは0.0〜1.0。
0以上の値のみ。
設定されてない場合は未定義となる。
max 全体の作業量。
デフォルトは1。
0以上の値のみ
form 関連付けるform要素に指定したID名


これだけで簡単に使用が可能です。
プログレスバーってかっこいいけどjQueryとかでわざわざ設定するのは面倒だったのでHTML5で実装されてありがたいです。
サンプル表示
<p><progress value="0" max="100">0%</progress> (0%)</p>
<p><progress value="30" max="100">30%</progress> (30%)</p>
<p><progress value="100" max="100">100%</progress> (100%)</p>
<p><progress>待機中</progress> (未確定)</p>

0% (0%)

30% (30%)

100% (100%)

待機中 (未確定)




コメントを残す