Posted by Anthony in Tutorials tagged css, html, javascript, jQuery, stylesheet

One nice feature that many websites have is a progress bar.  They come in many shapes and sizes, whether they are showing a user what step they’re on in a process, what percent of the way through a process the user is, etc.  And today, with the use of trusted CSS and JavaScript (in the form of the jQuery library), a progress bar has never been easier to create with a minimal amount of images needed.  (Truthfully, you don’t need any images, but in the example below the tutorial, I’ve used a few to add some nice styling to the example.)

With that said, on with the code!

Step 1: Set Up HTML Code

The first thing you want to do is to create two div tags in your file, each with unique IDs.  One will be the “container” for the progress bar, and the other will be located inside of it, and will be the one getting sized to show the progress.  Here’s how I have set it up:

<div id="progress-bar">
   <div id="status"></div>
</div>

Step 2: Add Some Style

Now that the basic HTML is set up (and seriously, how easy was that HTML setup?), we’ll add some CSS magic to make it look better.  Here’s how I have styled our example:

#progress-bar {border:1px solid #bebebe; background:#ffffff; width:300px; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#status {background:#0066cc; width:50%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}

The important thing to note here is that the #status ID has a percentage-based width.  Since it is contained within the fixed width #progress-bar div, it’ll automatically calculate how wide it has to be.  Oh the magic of CSS!

Another thing to note here is the use of the multiple “radius” attributes for different browsers.  It’s a bit out of the scope of this post, but to make a long story short, if your browser supports one of these attributes, you’ll get a nice rounded look.  If not, it’ll just be a normal rectangle.  Your call on whether you like the rounded corners or not.

If you decide to use the “radius” attributes for styling, be warned that if the percent width on your status bar is at or lower than the radius amount, it may throw off the look of the edges, as the browser will try to “make up” the shape with corners as best it can with the radius values included. This isn’t a factor when the corners are squared off, but it’s a good thing to know up front, just in case you need small percentages used.

Also, feel free to style these with background images, with taller heights, different colors, etc.  As you’ll see in the included sample below, I’ve gone ahead and added in some background images to spice up the design a bit.

3. Jazz It Up with jQuery

Once your HTML and CSS are in place, you’re all done.  Unless, however, you want to update the progress bar on the spot in front of the user.  If that’s what you’re going for, then here’s where you can use some jQuery goodness to animate the bar however you need.

First, you’ll need the most recent version of the jQuery library.  Link it into your HTML file, and then whenever you need to change the width of the #status bar, just call a JavaScript function like this (with the “80%” width attribute set to whatever you need it set to):

$("#status").animate( { width: "80%" }, 500);

Wrapping It Up

That’s really all there is to it.  Pretty basic stuff.  But it’s definitely a nice trick to have up your sleeve.  And with a little extra work on styling and JavaScript logic, you can have some pretty robust logic that does some really cool things.  The example below shows you how the extra styling looks, and will allow you to see how the #status bar animates when the jQuery function is called.

Until next time, happy coding!

Example