CSS Powered Percentage Bar

Posted on Jan.07, 2010No Comments CSS, Tools

After reading some of the css techniques mentioned at SmashingMagizine, I discovered that they had removed a dead link about a css powered percentage bar. I quickly decided to attempt a recreation of such a useful feature. Anyways, here is the easy code for creating a percentage bar.

Demo

The demo here shows the percentage bar using image backgrounds. This sample code tutorial below will demonstrate using background colors but if you wish to use images like above, refer to this download

[image: percentagebardemo]

The Code

<html>
<head>
<title>CSS Percentage Bar Test<title>
<style>
.bar {
width: 500px ;
height: 20px ;
border: 1px solid #444444;
background-color: #656565 ;
}
.barfill {
height: 20px ;
float: left ;
background-color: #6ba8e5 ;
width: 50% ; /* This is the percentage displayed */
}
</style>
</head>
<body>
<div class="bar">
<div class="barfill">
</div>
</div>
</body>
</html>

This CSS basically is the whole workings of the thing. It creates a bar and then fills it to a certain percent you define. Simple, eh? Try to play with it a bit, It’s amazing fun to mix with some javascript and use as a loading bar or upload progress bar.

What i’ve done is created the div with a class of “bar”. I made this 500 pixels wide and 20 pixels high. I gave it a grey background and gave it a dark grey border. To create the percentage, I then created a div with the class of “barfill” and made this float left inside of the “bar” div. I gave it a blue background and the percentage width I wanted displayed. To get results like the demo image, you would put “43%”. Check out the download to get the images and full code I used in my demo image.

Want an image next to your name? Sign up at Gravatar.com and in a few seconds you will be on your way. If you are signed up on Gravatar, enter the email associated with your Gravatar account when commenting.