Thursday, January 10, 2008

How do you make the progress bars?

I've had a few requests from other bloggers on how to set up progress bars like the ones in my sidebar. It's actually quite simple. I use Blogger to host my blog, so I'm not sure if there's another way to manage this using another service like WordPress, but I basically just insert a HTML/JavaScript widget in the layout, and then use the following HTML for each bar:
<b>Debt Reduction</b>
<div style="width:210px; height:18px; background:#e6e6e6; border:solid 1px #555;" class="goal">
<div style="height:18px; background:#5588aa; color:white; width:3.8%;" class="progress"><b>3.8%</b>
</div></div>
<div style="float:left;">$23,397.71</div>
<div style="float:right;">$14,000</div>

<br/>
For those who aren't as familiar with HTML, let's walk through the details:
<b>Debt Reduction</b>
This is just the name of the goal, in boldface.
<div style="width:210px; height:18px; background:#e6e6e6; border:solid 1px #555;" class="goal">
This is the outer frame of the progress bar. Here, I've set it to be 210 pixels wide, and 18 pixels high. The background colour is coded as "#e6e6e6", which is just a shade of gray. For more on how to interpret HTML colour codes, visit W3 Schools.
<div style="height:18px; background:#5588aa; color:white; width:3.8%;" class="progress">
This is the progress bar itself. Here, I've set it to be 18 pixels high (just like the outer frame), and have a width of 3.8% of the outer frame's width. The colour has been set to "#5588aa", which is a greenish blue.
<b>3.8%</b>
This is the text label to show 3.8% of progress, in boldface.
</div></div>
This simply closes the outer frame and progress bar objects.
<div style="float:left;">$23,397.71</div>
<div style="float:right;">$14,000</div>

<br/>
This provides the starting and ending amounts, positioned immediately beneath the progress bar, and followed by a line break (indicated by <br/>).

4 comments:

Chitown said...

Side note...if you put the progress width at say 20%, you won't get the elongated progress bar but it will still show 3.8%.

So it would be...

width:20%;" class="progress">3.8%

It will still show little progress and 3.8%...try it and see. I do it on my blog as well.

Loonies And Sense said...

I'm not sure I understand what you mean.

When you update your progress, you definitely have to change both the width of the bar and the label.

I tried changing the width without changing the label, and what I got was a bar 21 pixels wide (20% of the frame) with a label of 3.8%.

moneychallenge said...

Thank you for sharing this info! I had been hunting high and low for the HTML needed to create the progress bars (okay, maybe not that much). I was thrilled to find your post! These are nice and easy to use. Thanks again.

20 Something Money said...

Thank you very much. I have wanted these for a long time. It worked out great and was very easy to install with your instructions.