Result
http://jsfiddle.net/kachibito/Gj6Pv/47/embedded/result,js,css,html
jQuery
//クリックイベント $('#btn').click(function() { var bar = document.getElementById('Bar'), fallback = document.getElementById('download'), loaded = 0; var load = function() { loaded += 1; bar.value = loaded; //未サポートブラウザ時の処理 $(fallback).empty().append("HTML5のprogressタグがサポートされていないようです: "); //ロード中の処理 $('#Update').empty().append(loaded + "% ロード完了"); //100%に達した際のメッセージ表示 if (loaded == 100) { clearInterval(beginLoad); $('#Update').empty().append("ロード完了!"); console.log('ロード済みです'); } }; var beginLoad = setInterval(function() { load(); }, 50); });
css
#btn{ background:#999; border:1px solid #666; color:#fff;cursor: pointer;display: block;margin:0 0 10px; outline:none;padding:5px; } progress, #download, #Update {float:left;} progress, #download {margin-right:10px;} #Update, #download {font:12px Arial, Verdana, sans-serif;color:#000;}
html
<input type="button" value="アップロード開始" id="btn" /> <div class="clear"></div> <progress value="0" max="100" id="Bar"> <span id="download"> </span> </progress> <div id="Update"> </div>