Creating Progress Bar with CSS

How far did you go? How many space left to use? These questions can be answered by a single of graphic called "progress bar" or even "quota bar". Famous free email service such Yahoo!Mail or Gmail use this feature to warn their users how many quota left to use. You can build progress bar using a simple css code and few images. Look at this working example, nice isn’t it?. How? Lets move on…

First, you need two image to use as a bar frame and a progress bar.

bar frame
percentage-bg.png / Bar Frame

Progress-Bar
progress.png / Progress Bar

Create the images above with the same dimensions each other and the same positions of the object drawn inside, to make your css job more easier.

Now, go on to the HTML Code:

<div id="progress-bar">
	<div id="progress-level"></div>
</div>

The progress-bar id holds the bar frame, and the progress-level id holds the bar-level. And here is the CSS code:

#progress-bar {
   background: url(percentage-bg.png) no-repeat left center;
   width: 316px;
   height: 39px;
   margin: 0 auto;
	}
#progress-level {
   background: url(progress.png) no-repeat left center;
   width: 60%; /* SET THIS TO GET THE DESIRE LEVEL */
   height: 39px;
	}

All you need is to set the progress-level width, to get the desire level.

Done, as simple like that. You can download the sets, or test the working example.

Hope it’s usefull, cheers…