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:

background:url(‘images/progress.gif’) -8em no-repeat;
height: 12px;

The progress position is changed by adding a class for each position:

background:url(‘images/progress.gif’) -9em no-repeat;
background:url(‘images/progress.gif’) -8em no-repeat;
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!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s