CSS Progress Bar
This is a CSS trick originally from Man Bytes Hollywood article "Track your progress (or Lack thereof)".
Step 1: prepare your images
Your image must be an horizontally repeating background. Of course, you can choose to use no image at all and only a solid color. Too lazy to make a background? I've prepared two for you:
Step 2: the HTML code
This is very simple, we use two divs, one to make the border, it will have a fixed width, and one inside, to display the progress. To change the progress, change its width! :)
<div class="prog-border">
<div class="prog-bar" style="width: x%;">
</div>
</div>
Step 3: styling all this
Now, the most important, the CSS! In your stylesheet, add this:
.prog-border {
width: 200px;
height: 20px;
background: #FFF;
padding: 3px;
border: 1px solid #DDD;
}
.prog-bar {
height: 20px;
background: url(progress_bar_background.gif) repeat-x; /* use the color or the background you want! */
}
We're done! You should have this:
2 Responses to “CSS Progress Bar”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
how to do it in like "now loading" page, when the status bar is not -done- yet
nweiz nice tuts!!!! -happy-
Thanks for the great code!! However, i tried to make the height smaller (10px) and in IE7 it doesn't work. Something is wrong with the inner div but it seems i can't figure out.
Cheers
Ladio