A Brief Introduction

One of the not so well known features of HTML5 is that it will finally include a way to implement a progress bar on into your sites and applications. In my opinion, this is a long overdue feature since most of the software we use today has some type of way to tell us that we’re waiting on something to happen. Most developers use to use a rotating .gif image like the one below to symbolize progress:

This has been a good alternative, but up until now, there’s really just been no other way to do it. Thanks to the advancement of HTML5, we have a fairly simple way to let our users know that they’re waiting, and give them an even better visual representation.

Step 1: The HTML

The tag in the spotlight today is the <progress> tag. This tag uses the max and value properties to determine how “full” the progress bar is, and what the maximum value of the bar should be. In it’s simplest form, a progress bar is written into a page as follows:

In a sense, that’s all there is to it. By default, the progress bar looks nearly identical to the progress bar you would see on your desktop programs at home. Have a look:

This is a rather good looking solution to a very common issue. However, in it’s default state, all the element does is “throb” a green beam of light. A true progress bar will need to be “filled” as the progress as being made, and to accomplish that, we’ll need just a bit of JavaScript.

Part 2: Making it (slightly) dynamic

Our example will require a user to click the button 10 times to fill the progress bar to the top. Before we can begin, we’ll need to hop into our HTML and add the max and value attributes to our progress bar, as well as the button that the user will have to click. Here’s how the index.html should look now:

Nothing too tough here, right? Now, viewing the progress bar will produce slightly different results. Instead of the default “pulsing” bar, you’ll see a bar with nothing in it. Since we’ve given it a value of 0, the bar is going to show no progress. If we were to change the value to 50, the bar would be half full.  
The next step is to wire up our button so that it adds 10 to the value every time a user presses it. This will help us to see how the progress bar would essentially work. As you can see, our input button has an onclick attribute that is set to the JavaScript function addTenPercent(). We’ll need to go into our code and write out this function now. We won’t go into detail about the JavaScript, but the comments should help you work out what’s going on:

Now, go ahead and refresh the page if you’ve already got it loaded and click the button a few times. Notice that the progress bar continues to grow as you continue to press the button. Obviously, it stops at 100 because we have the max property set to 100 in the HTML. Clearly, this example is a bit contrived, so let’s see another example where the user doesn’t have to click anything. 

Part 3: Making it (truly) dynamic

All we’re going to do is change the JavaScript slightly by adding a timer to our program. The timer will call the addTenPercent() function every 2 seconds so that there’s no button clicking required. Again, try and use the comments to the best of your ability to wrap your head around the JavaScript functions. This will give you an idea of how a progress bar in a web application might actually work. Have a look:

In this example, you’ll see the bar progress 10 percent every 2 seconds which is far more dynamic than the previous one.

A Few Last Words

The progress bar, in my opinion, is a wonderful addition to the HTML family. There hasn’t been a much easier way to show a user that they are waiting for something, and I believe that it’s bringing us even closer to our web applications looking and feeling like native desktop apps. Join us in our next tutorial when we start digging into the canvas element to learn more about it’s features. See you then!

Download Source Files