Here is a small sample that I put together to show how to do smooth interpolation of the value of an HTML5 <progress>
bar. It doesn't tie in to the actual file API because I didn't want to have to keep copying giant files into browser cache to try and test this thing. However, the main point is that whenever you have an onprogress
trigger, you want to call the addProgress()
function. Do get rid of the setTimeout()
s though because they are only there to simulate progress.
jsFiddle
HTML/JS
<!DOCTYPE html>
<html>
<head>
<title>Smooth Progress Bar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="js/libs/jquery/jquery.js"></script>
</head>
<body>
<!--Our progress bar-->
<progress id="mybar" value="20" max="100"></progress>
<!--Our button to start progress simulation-->
<button id="start">Start</button>
<!--Our small script to simulate progress-->
<script>
// The progress bar element
var bar = document.getElementById("mybar");
// Add a listener to simulate progress
$("#start").click(doProgress);
// Our function that causes progress to be added
function addProgress() {
/*
* Create an animation that will interpolate a value from the
* current value of the progress bar to the actual new value
* of the progress bar.
*/
$({
// The value at present
interpVal: bar.value
}).animate({
// The new value after progress has happened
interpVal: bar.value + 10
},
{
// How long this interpolation should take
duration: 200,
// The function to set the progress bar's value to the inter val
step: function() {
bar.value = this.interpVal;
}
});
// Check to see if we should end our simulation
if (bar.value < bar.max) {
// If we aren't at max, keep progressing
setTimeout(addProgress, 2000);
}
}
// Function to bootstrap our progress
function doProgress() {
setTimeout(addProgress, 500);
}
</script>
</body>
</html>