Simple CSS shiny progress bar technique

I’ve recently come up with a simple way to make a decent looking, css colorable progress bar/meter out of a couple divs and an image. This is what mine looks like:

Basically, you have three divs: a container for the grey, non ‘populated’ section, a div for the colored value, and a div for the text. Both the container and the value div have your image as a background. This image uses mad awesome png transparency to show some of the div’s background color through.

HTML

The HTML is simple:

<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 40%;">
        <div class="meter-text">
            Text Here!
        </div>
    </div>
</div>

Notice the style attribute in the .meter-value div. The background color is the color of the progress bar, and the width is set to the percentage of progress. Easy peasy.

CSS

Oh yes, in all of its glory:

.meter-wrap{
    position: relative;
}

.meter-wrap, .meter-value, .meter-text {
    /* The width and height of your image */
    width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;
}

.meter-text {
    position: absolute;
    top:0; left:0;

    padding-top: 5px;

    color: #fff;
    text-align: center;
    width: 100%;
}

The Image

Here is my image. I’ve placed it on a colored background so you can see the corners. It simply has completely opaque white corners, and uses a gradient for the center that goes from transparent white to completely transparent. An image like this is very easy to construct in a vector drawing application such as Inkscape.

Examples with JavaScript!

Now, so you can see what it can do, I’ve put together a couple of super rad jQuery examples.

Click the bar below to see the it go from 0% to 100%!

Or maybe this one that runs through a range of colors.

← Back to BenOgle.com