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…

15 Comments

  1. Have been looking at doing site optimization and improving the design on my site for a while, so this post has been really useful. Easy read also, so thank you!

  2. bhupesh

    great !!! its very easy to understand and much more useful, it solves my problem… thanks, keep it up……

  3. PupungBP

    @Dr. Frankenstein: I’ve tested on IE, Firefox, and Safari, the CSS works fine. But one thing, the working example doesn’t work, there an issue on the script but i have fixed it now. thanks.

  4. Just one problem: This only seems to work on Microsoft’s Internet Explorer browser. Mozilla browsers and Opera (at least on Linux here) just show a full bar. Safari probably does that too.

    On standard-compliant browsers, the background of a DIV is extended to the width of its container, no matter what its width is.

  5. PupungBP

    @dental: Sudah daftar 🙂 he..he..he.. makasih infonya…

  6. PupungBP

    @aws: Selamat mencoba
    @Bayu: Mangga…
    @firman: Sama-sama 🙂

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.