プログレスバー、画像を使わずに。

画像を使わないでＣＳＳで描画させるプログレスバーを探したらありました。

red-team-design.com

これを jQuery の $.ajax で通信した時に、進捗率を表示させます。

これに、バーの中央に（％）進捗率を表示させたいので、以下のようにHTMLを書いて、

	<div id="preogress_bar" class="progress-bar stripes">
		<span style="width: 0%"></span><p>0 %</p>
	</div>

次のＣＳＳスタイルを追加します。

div.progress-bar{
	position: relative;
	margin: 20px 10px;
	display: none;		/* 初期表示は隠す */
}
.progress-bar p{
	position: absolute;
	top: 6px;		/* font-size 考慮して調整 */
	left: 250px;	/* .progress-bar  width → 半分程度に調整 */
	margin: 0px;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
}

jQuery は、以下の様に用意します。

$.ajax({ url: "/hoge/upload",
	type: 'POST',
	data : formdata,
	dataType: 'json',
	contentType: false,
	processData: false,
	async: true,
	xhr : function(){
		XHR = $.ajaxSettings.xhr();
		if(XHR.upload){
			XHR.upload.addEventListener('progress', function(e){
				var progress = parseInt(e.loaded/e.total*10000)/100;
				console.log(progress+"%");
				$('#preogress_bar').children("span").css('width', progress + "%");
				$('#preogress_bar').children("p").html(progress + " %")
			}, false);
		}
		return XHR;
	},
	success: function(data, textStatus, jqXHR){
	},
	error: function(jqXHR, textStatus, errorThrown){
		alert('error');
	}
});

以下のように表示されます。