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%）

待機中 （未確定）

«前の記事：ドラッグ & ドロップでファイルをアップロードする方法ファイルアップ時に進捗を表示する方法：次の記事»