Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<meta name="description" content="An example of simple JavaScript animation for HTML5 meters and progress bars." />
<meta charset=utf-8 />
<title>JS Bin</title>
<p><meter id="meter" value="300" min="0" max="500">300Gb of 500Gb</meter></p>
<p><progress id="progress" value="50" max="100">50%</progress></p>
* A simple function to animate HTML5 meters
* and progress bars.
animateProgress = function(el, start, stop, interval, reverse) {
interval = interval || 10;
stop = stop || el.max;
if (reverse) stop = el.min;
if (start===undefined) el.value; // allow 0 value
var value = start;
var id = setInterval(function() {
if (start<stop) value++;
if (start>stop) value--;
el.value = value;
if (value == stop) clearInterval(id);
}, interval);
loadProgress = function(el, interval) {
animateProgress(el, 0, el.value, interval, false);
var meter = document.getElementById("meter");
animateProgress(meter, 0, 500, 5);
var progress = document.getElementById("progress");
loadProgress(progress, 40);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.