HTML5 now contains a markup tag 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.
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:
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
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
Creating 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
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.