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.
percentage-bg.png / Bar Frame
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…
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!
Thanks A lot! We will be using this in our next release at ilikeplaces.com. Awesome approach!
Pingback: Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop | DevWebPro
great !!! its very easy to understand and much more useful, it solves my problem… thanks, keep it up……
Pingback: links for 2008-12-09 « Minesa IT
Pingback: Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop | DeveloperFox
@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.
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.
Hallo Kang Pupung,
You have try 53 technique in this website:
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
@dental: Sudah daftar 🙂 he..he..he.. makasih infonya…
nice article!
just info, kalau mas pupung mungkin berminat gabung dengan merdeka.or.id? silahkan submit blognya di http://merdeka.or.id/submit.php 🙂
@aws: Selamat mencoba
@Bayu: Mangga…
@firman: Sama-sama 🙂
thanks…
Ass.,
Bos, thank’s for your sharing knowlegde. It’s great. By the way, i would like to link your site in my blog.
Hatur Nuhun
Wassalam
Bayu
http://netfarm.blogsome.com
boleh dicoba tuh