Web progress bar

Would you like something like this in your web page?

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.