Build a Customized Progress Bar Using CSS and JQuery

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>

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: Single Progress Bar

Example: Multiple Progress Bars

As mentioned in the comments, the solution outlined above in this post only work correctly when there is one progress bar on the page. The example below offers a solution for having multiple bars on the same page, using classes and unique ID values to correctly and dynamically target the appropriate elements for updating the progress bars. Feel free to view this example on its own and inspect the source code to get a feel for how it’s done.

5 Responses to this post:

  • Eric says:

    But it does not work well if u have to display say multiple bars with different percentages and u reduce the width from 300px to say 100px. It displays 14% and 8% the same

  • If you need to display multiple progress bars, you would need to give each element a unique “id” property, and/or set a more general class for each element. Having multiple elements with the same “id” will create issues, so using classes would be the way to go. Then in the JavaScript, you would target each item individually via the unique “id”, or other similar method to target just the progress bar you need to target.

  • I have updated this article with an additional example, which includes multiple progress bars. Hope it helps!

  • briane says:

    Hi Anthony, what would be your suggestion if you wanted to have the progress bar change (either increase or decrease) due to what the user submits. So say for example, user has a goal of making 3 pies; and the 3 pies represent the progress bar. So if the user some how was able to (using a form/input field) note that they made 2 pies, how does that change what you have written above?

  • braine,

    The samples in the post show the progress bar with a user-settable value between 0 and 100, but you could easily remove or update the form elements to allow for non-percentage inputs.

    That said, I’d simply take the user-inputted value and divide by the target. So in your example, if the user inputted 2, and the target was 3, just divide 2/3 (and multiply by 100) to get your percentage between 0 and 100. You can then call the jQuery “animate” method, using that derived percent as the width to animate the progress up/down to.

    Hope it helps!

Leave a Comment