CSS Progress Bar

A user on a board I frequent wanted to make a progress bar on their website. You know, to show how pregnant you are, or how close to the total donations are, stuff like that. My first thought was to use CSS boxes to make a box of fixed width box containing two other boxes. The first box would have a width of whatever percentage you have completed. The second box would expand to fit the rest of the space. Others suggested just making an image for each percentage that needed to be shown, and just copying each one to currentprogress.gif or something.

Mine was a decent idea, but I wasn’t really familiar with CSS enough to just spit out the code for it. Someone else used the same basic idea and did it with tables. The row had a background color of red, with a green first column and a blank second column. I’m all for standards and getting people away from using tables for layout stuff, so I looked up some CSS stuff and figured it out.

<div style="width:400px;">
  <div style="text-align:center; float:left; width:90%; color:white; background:green;">90%</div>
  <div style="text-align:center; background:red;">&nbsp;</div>
</div>

Here’s what that looks like:

90%
 

It’s just a small bit of code, and you simply change the first “90%” to change the width of the “completed” bar, and the second “90%” to change the caption. If you don’t want a caption, just replace it with a non-breaking space like the second box has (the box needs to contain something, or it won’t be displayed). If you want, you can change the text alignment to right and the caption will show next to the green/red intersection. Here‘s a page showing that. Also, I believe it should show up as just “90%” on browsers that don’t support CSS. It’s not automatic as if it were linked to a database, and it may or may not be more work than simply uploading a new copy of an image. Depending on your host, you may be able to edit the page from a shell and not have to bother with uploading anything. It may or may not be easier for you, but this is just one more thing to show off the abilites of CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: This post is over 5 years old. You may want to check later in this blog to see if there is new information relevant to your comment.