Skip to content

Instantly share code, notes, and snippets.

@Nilpo

Nilpo/jsbin.AFaxaFEQ.html

Created January 23, 2014 20:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nilpo/8586142 to your computer and use it in GitHub Desktop.
Save Nilpo/8586142 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.AFaxaFEQ.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="An example of simple JavaScript animation for HTML5 meters and progress bars." />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>
Raw
jsbin.AFaxaFEQ.js
/**
* 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