Home > Web > Web progress bar

Web progress bar


Would you like something like this in your web page?
web progress bar
Then I will show you how to do it.
The basic idea is pretty simple: implement it using 3 DIVs – one for the progress bar background, one for the completed part and one for the label (indicating the completed value or percent). They are stacked on top of each other in the specified order, from bottom to top.

We will have a main DIV, the actual progress bar, and inside it a completed one that will take as much space from its parent as the task is completed and a label to indicate that percentage.

On the main DIV we specify a border that will enclose the entire progress bar and a background that will indicate the remaining part. We also specify a different background on the completed DIV to indicate the completed part of the task. As for the label we specify only a font color and the background should remain transparent, so the label just sits on the progress bar.

Both children DIVs of the progress bar are floated to left and the label one has a negative margin to allow to be displayed at the same coordinates as the completed one.

  • HTML code

    <div id='progressbar' class='progressbar'>
        <div id='completed' class='completed'></div>
        <div id='label' class='label'>0%</div>
    </div>
    

  • CSS

    .progressbar {
        /* only for better layout :) */
        background-color: white;
        border: solid 1px black;
        width: 100px;
        height: 10px;
        font-family: arial;
        font-size: 10px;
    }
    
    .progressbar .completed {
        /* mandatory */
        width: 0%; 
        height: 100%; 
        z-index: 1; 
        float: left;
    
        /* only for better layout :) */
        background-color: navy;
    }
    
    .label {
        /* mandatory */
        width: 100%;
        height: 100%;
        z-index: 2;
        float: left;
    
        /* only for better layout :) */
        text-align: center;
        vertical-align: middle;
        color: yellow;
    }
    

    As you can see some of the CSS properties are mandatory for the component to render as a progress bar, as some of the properties are used only for a visually appealing layout.

  • JavaScript

    function setPercent(percent) {
        document.getElementById("label").innerHTML = percent + "%";
        document.getElementById("label").style.marginLeft = "-" + percent + "%";
        document.getElementById("completed").style.width = percent + "%";
    }
    

Next step will be to wrap all these into a nice component (JavaScript class). But this depends only on your architectural skills, as now you have the basic technique.

And in the end you can see a full working example, tested on IE6, FF3 and Safari 3. If you get rid of the hassle of implementing this yourself and you want a ready to use and easy to integrate progress bar component for your web pages you should see the MyUI JavaScript library. A demo is also available.

Just a side note, a throbber (or indeterminate progress bar) is easier to implement, that one being only a simple animated image.

  1. fenixk19
    March 4, 2009 at 9:24 pm

    Thanx. This is useful thing.

  2. Srikanth Reddy Alleddula
    June 2, 2009 at 7:31 am

    Thnq man ur code helpled me a lot

    • for1206
      February 13, 2011 at 1:18 pm

      Hi,

      I have to increase the percent based on the task completed from serverside .In server side I have a DB scripts to update using C#.I have to show the status of the task .

      Like “Initializing the scripts”,….. xyz table is executing…. 70 % done , Completed like that using Asyncrhonously

  1. December 12, 2009 at 10:43 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: