Working with CSS Positions: Creating a Simple Progress Bar

by Troy Grosfield
February 11th, 2013

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

CSS Progress Bars


Give all components a common width:

.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;


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 class="container">
    <div class="inner"style="height: 11px">
        <div class="value">11.1%</div>

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

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

No Comments »

No Comments Yet

Leave a reply

You must be logged in to post a comment.