Creating the progress bar
The following code will create a progress bar that will go from 0 to 100 increments by 5% each second. 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>
The Javascript behind the progress bar
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 tag 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!
Published on Mar 11, 2019
Tags: html
| JavaScript
| jQuery Tutorial