May 26, 2007
Design Problem – Scalable Progress Bar
I been looking into some css solutions for creating web bars. A css solutions is desirable over animated GIFs or embedded flash for several reason, primarily because of load efficiency and the ability to control the animation.
Using a single background image or sprite image makes loading of the progress bar image quite efficient. The background image or sprite image can be moved using background image positioning:
#progress
{
background:url(‘images/progress.gif’) -8em no-repeat;
height: 12px;
width:130px;
margin-top:14px;
margin-left:7px;
position:absolute;
}
The progress position is changed by adding a class for each position:
#progress._10
{
background:url(‘images/progress.gif’) -9em no-repeat;
}
#progress._20
{
background:url(‘images/progress.gif’) -8em no-repeat;
}
#progress._30
{
background:url(‘images/progress.gif’) -7em no-repeat;
}
So the -em position (-9, -8, -7) represents the inverse of the percentage value (10%, 20%, 30%). At it scales properly!
