Semantic, Cross-Browser, Pure CSS Progress Bars
10.10.07Progress bars are one of those things that are horribly useful, but which always seem to be more complex to actually pull off than they should be. Fortunately, they don’t have to be hard.
I tend to enjoy dabbling in elegant CSS, and figured this might be of some use to some of you out there.
If you’re lazy and just want the code, grab it here.
Let’s start simple. We need several elements: A container for the progress bar, of course, the bar itself, and a label for what the bar means.
<div class="progressbar"> <div style="width: 5%;"> <p>This is a bar label.</p> </div> </div>
Not too bad codewise, huh? Not a whole lot of time or effort involved in creating something like this. However, it doesn’t look much like a progress bar yet. It’s really just kind of a chunk of text. This is a good thing, actually - outside of the context of CSS (say, a screen reader, or a mobile device), this is what your user will see. Now, this is a progress bar, so we’re going to want to tell the CSS-less what the status of the progress bar is, right?
<div class="progressbar"> <div style="width: 5%;"> <p>This is a bar label.</p> <span>(5% done)</span> </div> </div>
Let’s start actually marking it up.
.progressbar {
position: relative;
border: 2px solid #cf5;
background: #ffa;
width: 500px;
height: 2em;
margin-bottom: 4px;
}
Well, we have a box now, so that’s a start. You can give the box any width, height, border, background, or margin-bottom that you like (in the event if vertically-stacked boxes). The real magic is in the position: relative - we’re creating a context for our bar itself.
One thing to note: This is going to look a little ugly in IE, so we need to get it out of quirks mode. You can do so my specifying a DOCTYPE at the top of your file, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
We’ll go ahead and style the bar now.
.progressbar div {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background-color: #cf5;
}
Not too hard. We’re just going to position the bar absolutely inside our container and set its top, left, and height - the width (which is what gives the progress bar its progress) goes in the tag declaration itself, since it’ll be unique to each bar.
Now, we have an actual functional CSS progress bar. But, the labels are kinda ugly, and it’s sorta redundant to show the percentage completion when we can see it ourselves. Also, any sufficiently small progress bar is going to clip off our label! That’s not good!
.progressbar div p {
white-space: nowrap;
display: block;
height: 100%;
margin: 0;
padding: 0 1em;
line-height: 2em;
font-weight: bold;
}
.progressbar p span {
display: none;
}
There are a couple of things happening here. First is the white-space:nowrap, which ensures that labels don’t wrap. We don’t very well want our labels stretching out onto two lines and breaking the layout. We set the paragraph to the full height of box, but there is one additional piece of magic here - the line-height directive needs to match the height of your .progressbar declaration. This ensures that the text stays centered.
The final piece hides our percentage label from any client that can see CSS. The result is that semantically, we can know how far along the bar is without CSS, but we don’t duplicate that information when we have it. It’s the best of both worlds!
Finally, if you’d like to see an example, you can check out my working copy here. That’s all for now!
10 Responses to “Semantic, Cross-Browser, Pure CSS Progress Bars”
Leave a Reply
Subscribe to comments feed (this is global, not just for this entry)
I read similar article also named Semantic, Cross-Browser, Pure CSS Progress Bars, and it was completely different. Personally, I agree with you more, because this article makes a little bit more sense for me
July 6th, 2008 at 10:57 pmcheapest diet pills…
Cheapest Diet Pills…
July 10th, 2008 at 5:57 pmMissouri Personal Injury Law…
just found your site. good stuff….
July 25th, 2008 at 7:45 pmGood Stuff….
Wasn’t looking for this but amazing what you can find online….
August 20th, 2008 at 6:08 amNice site….
Hey I wasn’t exactly looking for your site, but cool….
August 25th, 2008 at 11:19 pmWe have been an ebay power seller and paypal confirmed seller of wow gold for years.
October 15th, 2008 at 3:50 amI know some wow gold in wow.
October 20th, 2008 at 10:01 amcoach Herm Edwards gave his famous speech about playing to win games. wow goldSunday’sbut it was the wrong decision.
November 12th, 2008 at 3:03 amI know some runescape gold in rsgold.
November 15th, 2008 at 9:02 pmI like this progressbar, I am not sure how I’ll use it, but I am looking for a way to anyway!
November 17th, 2008 at 1:49 pm