JS Progress Bar
HTML
<progress id='video-progress' min='0' max='100' value=''></progress><br/>
<input id="launch" type="button" value="Launch" />
CSS
html {
font: 0.9em sans-serif;
}
input, progress {
margin-top:15px;
}
input {
padding:5px 15px;
}
progress {
height:25px;
}
JavaScript
function smoothProgress(e) {
var id = $("#"+e.data.id),
dur = 5000,
seq = 50,
max = parseInt( id.attr("max"), 10),
chunk = max / dur * seq,
loop = setInterval(function() {
if( id.val() < max )
id.val( id.val() + chunk );
else {
alert("All done!");
clearInterval(loop);
}
}, seq);
}
$(document).ready(function() {
$("#launch").on("click", {id: $("progress").attr("id")}, smoothProgress);
});