Progress Bar using css (cascading style sheet)

Recently I worked on some functionality where we wanted to show progress to users whilst they were answering a survey. Basically as they answered the questions a progress bar would show the completion percentage. As I started playing around with some css, it turned out be quite easy.

Have a look at the example below:

Progress

    

The above progress bar is made of three div tags,
1. The outer container div with a border which works as a place holder for the progress and the text being displayed

The relative positioning of this container ensures that all it's child div tags are contained within.

2. Next is the div container which will sit inside the above div and show the progress. This is just an absolute positioned div with a background color or an repeater image. Basically, we just change the width of this div to show the increase in progress.

3. The third div is another absolute positioned container which will sit inside the place holder div tag to show the text. The important thing to notice about it's style is that, it completely fills the place holder div with a transparent background so you can see the progress. The higher z-index ensures that it will sit on top of the div showing the progress in background.

Now what you need is some jquery to manipulate the width of the div showing the progress. As an example: