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!

Advertisements

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