$('#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 + "% ロード完了"); if (loaded == 100) { clearInterval(beginLoad); $('#Update').empty().append("ロード完了!"); console.log('ロード済みです'); } }; var beginLoad = setInterval(function() { load(); }, 50); });
#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;}
<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>