Wednesday, October 10, 2007

Goal Progress Bars for Your Blog

One of the questions I'm getting more and more often is, "How do you make those little green progress bars on the sidebar of your blog?"

If you're a blogger, having progress bars like these can be a great way to make your financial (or whatever!) progress more tangible. It's also yet another way to help make yourself more accountable to the masses (real or imagined).

Creating the bars isn't hard — so long as you have some familiarity with HTML and CSS, plus a wee bit o' PHP. (Although the PHP's not absolutely necessary. I'm lazy, and I just prefer that a computer do the math rather than me.)

Interested? Here's what you need:

  • Your own web site or blog, on which you can modify your pages' or templates' code directly.

  • Optional: A web server capable of running PHP.

  • Some knowledge of (and a willingness to fiddle with) HTML, CSS, and PHP.

And here's the ZIP file with the code snippets:

ZIP File: Financial Progess Bar Code

Inside that ZIP file are two documents: one contains the CSS styling, and one contains the HTML and PHP.

If you prefer, you can remove the PHP code and simply hand-enter your own numbers and percentages as needed directly in the HTML and CSS. As the code stands now, though, the only figures I ever need to change are the values in the "Set Up PHP Values" section. I placed this section at the very top of my page's template so it's quick and easy to change — no need to scroll down to the middle of my template where the progress-bar code resides.

It's pretty simple stuff (I hope!)


— Posted by Michael @ 9:44 AM


Thanks for posting this. I have been trying to figure out how to do this on my blog for awhile.


Good to see - was looking to figure something like that out myself... :)


This is awesome. Is there a way to make a progress bar with Excel in a spreadsheet? I've wanted that for years.


Should be easy to do in Excel. You're basically just plugging in data and having XL create a bar chart for you...


I know it should be easy. LOL. I've just never figured out a way to do it. I thought it would be a great visual tool in a spreadsheet, the same way it's a great tool in a blog post. I'll try the bar chart method - I've just never figured out a cool way to do a progress bar.

** Comments Closed on this Post **

Thoughts on my personal finances, goals, experiences, motivations, and accomplishments (or lack thereof).

My financial life began turning around when I took responsibility for it.
— Dave Ramsey


Start (2005-12): ~$21,900
Currently: $0
[About Our Debt Paydown]


Savings Goal: $15,000
Currently: ~$15,115
[About Our Liquid Savings Goal]