powered by Slim Framework
enhanced by Nesbot.com

HTML5: Displaying a Progress Bar

Published on Nov 7, 2011 by Jamie Munro

One of the new HTML5 markup tags is called progress.  This displays a basic progress bar based on two attributes that you must specify: the current value and the max value.  Using some basic Javascript, you can increment the progress bar so the user knows something is happening and will be done soon.




Before I show you the solution, let's look at a basic example.  This progress bar will go from 0 to 100 increments by 5% each second.

[[EXAMPLE]]

If you don't see a progress bar, it's mostly likely because you are not viewing this page in Chrome or Safari.  Like many HTML5 tags, Webkit-based browsers still dominate in the support for it.

Here is the code to display and increment the progress bar:


<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
</head>

<body>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<progress id="myProgress" value="0" max="100"></progress>

<script>
var timer;
var progress;
var max;
$(document).ready(function() {
progress = $("#myProgress");
max = progress.attr("max");
timer = setInterval("updateBar()", 1000);
});

function updateBar() {
var current = progress.attr("value");
current += 5;
progress.attr("value", current);

if (current >= max) {
clearInterval(timer);
}
}
</script>
</body>
</html>


Using some basic Javascript, I set an interval timer for every second to call the updateBar function.  This function uses some basic jQuery to retrieve the current value and increment it by 5.  Using the same basic jQuery it changes the value as well.  Finally, if the progress bar has reached 100%, the timer is cleared.

Summary


The progress bar is a great and simple addition to HTML5.  As more browsers support its features, it will become a pivotal role in game making because you will want a fast loading web page and then asynchronously load your actual game mechanics.  What better way to load these and inform the user of their progress than a progress bar!

Tags: HTML5 | html5

<- CakePHP: Using the JsHelper to submit a form with AJAX  Home jQuery: Manipulating an array of HTML elements with $.map() -> 
blog comments powered by Disqus