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/>).