CSS Percentage Bars

I thought of another reason for a little fun with CSS today: percentage bars. First of all, here’s the example I’ve uploaded.

Now let’s start building the first bar. We’re going to use two div elements likes this:

<div id="box">
<div id="bar">50%</div>
</div>

The first div is to define the edges of the box. The second is display whatever percentage you’d like. Now let’s throw a little style on that.

#box{width:250px;border:1px solid #000;height:17px;}
#bar{width:50%;background:#000;height:14px;color:#fff;text-align:right;
padding:3px 0px 0px 0px;}

So the bar at 100% will be 250px, as defined in #box. For this example, we’re displaying the bar percentage at 50, which is why we have the width set to 50%. But let’s say we’re going to be using a framework or cms to display that percentage, and we can’t add tags into the style sheet. Well we’ll just take the width out of #bar

#box{width:250px;border:1px solid #000;height:17px;}
#bar{background:#000;height:14px;color:#fff;text-align:right;padding:3px 0px 0px 0px;}

And then we’ll move that % to the #bar div with a style tag there.

<div id="box">
<div id="bar" style="width:50%;">50%</div>
</div>

Now if we wanted to spice it up a little bit, we could add a background image instead of just a black background.

#bar{background:url("bar.png");height:14px;color:#000;text-align:right;
padding:3px 0px 0px 0px;}

Again, you can take a look at the example file for a demo of all of options I just mentioned. If you’d like to reuse any of these on the same page, just change from id to class. This should work in pretty much any browser.