Working with CSS Positions: Creating a Simple Progress Bar

Headline

Working with CSS Positions: Creating a Simple Progress Bar

Author

by Troy Grosfield

Date

February 11th, 2013

Category

Developer

Story

Working with CSS positioning can be tricky at times. There are a few affects that you want to achieve, but aren’t quite sure how. In the below example, I’ll show you how to create a simple progress bar affect using styles.

The affect we’re trying to achieve

Styles

Give all components a common width:

.container, 
.container .inner, 
.container .value { 
    width: 100px; 
}

Define the outer container where all elements will reside:

.container { 
    background-color: yellow;
    box-shadow: 2px 2px 2px silver;
    float: left;
    height: 100px;
    margin: 10px;
    position: relative;
    text-align: center;
}

Since we want all elements to sit at the bottom of the container, just set the position to absolute

.container .inner, 
.container .value {
    bottom: 0;
    position: absolute;
}
.container .inner {
    background-color: #2CBE84;
}

Markup

Typically you don’t want any inline styles. However, in this case we’re assuming that the progress values are calculated on the fly. So, we need to add a custom height depending on the progress value.

<div class="container">
    <div class="inner" style="height: 81px">
        <div class="value">81.1%</div>
    </div>
</div>

<div class="container">
    <div class="inner"style="height: 11px">
        <div class="value">11.1%</div>
    </div>
</div>

<div class="container">
    <div class="inner" style="height: 5px">
        <div class="value">5.0%</div>
    </div>
</div>

That’s it! You have just created a simple progress bar using object oriented css!

TroyGrosfield.com