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.
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…
boleh dicoba tuh
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
thanks…
@aws: Selamat mencoba
@Bayu: Mangga…
@firman: Sama-sama :)
nice article!
just info, kalau mas pupung mungkin berminat gabung dengan merdeka.or.id? silahkan submit blognya di http://merdeka.or.id/submit.php :)
@dental: Sudah daftar :) he..he..he.. makasih infonya…
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/