画像を使わないでCSSで描画させるプログレスバーを探したらありました。
これを jQuery の $.ajax で通信した時に、進捗率を表示させます。
これに、バーの中央に(%)進捗率を表示させたいので、以下のようにHTMLを書いて、
<div id="preogress_bar" class="progress-bar stripes"> <span style="width: 0%"></span><p>0 %</p> </div>
次のCSSスタイルを追加します。
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'); } });
以下のように表示されます。