Share this:

They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience. Here's what they look like in Opera 11 which supports some of the CSS3 used here but not all.

As you might imagine, in browsers that support no CSS3 at all will look similar to the above, only even more simplified.

HTML Base

The bar itself will be a <div> with a class of meter. Within that is a <span> which acts as the "filled" area of the progress bar. This is set with an inline style. It's the markup which will know how far to fill a progress bar, so this is a case where inline styles make perfect sense. The CSS alternative would be to create classes like "fill-10-percent", "fill-one-third" or stuff like that, which is heavier and less flexible.

The basic:

<div class="meter">
<span style="width: 25%"></span>
</div>

Start of CSS

The div wrapper is the track of the progress bar. We won't set a width, so it will stretch as wide as it's parent as a block level element does. You could though. Height is also arbitrary. It's set at 20px here but could be anything. We'll round the corners in as many browsers as we can and set an inset shadow to give it a hair of depth.

Then span inside will be the fill in part of the progress bar. We'll make it display as a block with 100% height, so it stretches to fit whatever room it has. We'll then use a bunch of CSS3 to give it gradient look and round it's corners.

Candystriping

We can get a cool striped effect by adding another element on top of that span and laying a repeated CSS3 gradient over it. Semantically this is best achieved with a pseudo element, so let's do it that way. We're going to absolutely position it over the exact area of the span (which already has relative positioning) and then round the corners the same so the stripes don't stick out weird.

Animating Candystripes

Only Firefox 4 can animate pseudo elements, and only WebKit can do keyframe animations. So unfortunately we're between a rock and a hardplace in terms of animating those stripes. If we're set on it, let's add an additional span and then WebKit animate that.

Might as well leave the animation tied to the pseudo element too, so as soon as WebKit starts supporting that, it will work.

Animating the Filled Width

Unfortunately you can't animate to an auto or natural width, which might let us animate from a forced zero to the inline style.

@keyframes expandWidth {
0% { width: 0; }
100% { width: auto; }
}

Update 1/25/2012: Turns out you CAN animate to an inline style. Just omit the "to" or "100%" ending value in the @keyframe

I've submitted it to major browsers bug trackers just to push it a long a little, but for now, unsupported. Instead, let's do it with jQuery. Measure the original width, force it down to zero, then animate back up:

Others Takes

HEY?! What about HTML5?

Dude my dude. HTML5 has features specifically for this. <progress> and <meter>! Yep, it does, but here's the rub. These elements have very specific appearance already applied to them. By default, they look like progress bars used elsewhere on the platform you are on. Like this on Mac:

You can turn off that default styling like this:

progress {
-webkit-appearance: none;
}

That'll allow you to remove the glossly thing going on with that default styling, but it's still pretty limited as to what you can do. You can change the progress bar inside like this:

...and that's fairly limited in what you can do with it afterward as well. To make things worse, things are very different across browsers, even between different WebKit browsers. Pseudo elements also work inconsistently. I hate to leave things hanging like this, but this is really a topic for another time. Suffice it to say, for these particular progress bars, the div/span thing is the ticket for now.

While all of this stuff is super cool, they are not going to be used until CSS3 and HTML5 have become a standard. I wish we cool jump ahead a few years in terms of HTML standards….too many dang people are still running IE7/IE8. AGGGHH

Hi Chris…. I’m trying to use this bars on my admin panel cms. anyway i wanna hide it (display:none;) & wanna show it from jquery fadeIn. when i’m trying I noticed that Width of Bar’s doesn’t take exactly. please help me. here is my code.

I try do do two things more, but don’t know if it’s possible with this approach :

1) I would like to put an image with transparency above the background. But with no result. Imagine a glass of beer empty in png format, registered with transparency from illustrator, so that the content of the glass is empty. I dream to fill the glass to 30% for example with the animated background. In this purpose, the image should be above and the background color behind, to fill the glass. Is it possible ?

2) Is it possible, also, to make the backgound growing from bottom to top of the div, instead of left to right as it is in your example ?

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.