Saturday, March 5, 2011

Progress Bars for Your Challenges

I've been asked a number of times about the progress bars for my challenges. They're not widgets (which means you have to update them by hand as you finish your books), but they're also not really complicated. If you want a status bar, just copy the following code and paste it into the HTML of your blog post (you can also paste it into the HTML widget on Blogger, too, if you want it in your sidebar like I have):

<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(155, 155, 155); font-size: 8px; line-height: 8px;"></div></div>

Your bar will look like this:

The width of the progress bar is set at 190 pixels and the height is 15 pixels, but you can change that to whatever you like (you might want to do this if you're putting it in a narrow sidebar so that it doesn't get cut off).

You'll probably also want to change the colours so that it matches your blog. In the code, where it says "rgb", it indicates a colour. The first one is the background of the bar (set as white in this case); the second colour (set as black) is the border colour; the third colour (it will be grey here) is the actual bar.

To change the "progress" of your bar, just set the "width" value (the one in %... not pixels) to whatever percentage you like. Here, I've set it to 33%:

Enjoy your brand new progress bars! Happy reading!


  1. Thanks for the great post. I already had them, but I had look everywhere for them. Mostly I couldn't figure out what they were called so I could google them. I'm a new follower.

  2. Thanks, I've Always wondered how to do that.
    You are awesome :D

  3. Thanks so much for sharing this! The bar code I've been using has been messing up so hopefully this will be a good fix!

  4. I've been look for this and I'm so glad I've found it! Thank you!!