Percentage based status bars

Status and percentage bars are very convenient and highly useful for representing a users position in a check out, registration, or other multi-step operation.

Visual representations are not nearly as common as they perhaps should be, which is surprising given how easy they are to create.

This basic example requires two image files, and two divs.

First, within our css file, we create one div with a background image showing the numerical percentage from 1-100, with a height, width and background image (in order to keep things simple I’ve applied some padding to accommodate the border within the image).

[css]#statusBar
{
margin: 300px auto;
padding: 1px 1px 0 1px;
width: 448px;
height: 37px;
background: url(percentbg.gif) top left no-repeat;
}[/css]

Next we create a second div with a height and background image, but no width.

[css]#theStatus
{
float: left;
height: 37px;
background: url(percent.gif) bottom left repeat-x;
}[/css]

Now in your .php file we define the width with a simple bit of php. The reason we do this is that your width may be truly dynamic by receiving the width for the current page/position from your cms, cart, etc. For examples sake we’ll set the width manually like so.

[php][/php]

Now inside your php file we add the rule to give ‘current position’ to our status bar.

[css]

[/css]

And finally the html to make it all work.
[html]

[/html]

Quick, easy, and quite useful. You can see the example in action over here.