Displaying Percentages in a Progress Bar

David Stone over at Bare Naked App talks of using a background image to display percentages in a progress bar. The technique could also be used for bar charts or poll results.

What I've traditionally done for these kinds of things, since the image can stretch left to right with no degradation (in other words, there's no horizontal pattern, just a vertical one), I usually just use an image that is 1 pixel wide and set to a specific width based on a percentage of the available space. The width is calculated server-side (as is the background position in David's example).

To do the rounded corners, though, I'd need 3 images (background, progress bar, and overlay) so their approach does have its advantages (it only requires two images — progress bar and overlay).

To check out an example of what I mean, you can check out this site I worked on. (yeah, just ignore the layout tables.)

Published August 15, 2006 · Updated September 14, 2006
Categorized as HTML and CSS
Short URL: https://snook.ca/s/640

Conversation

3 Comments · RSS feed
1
Bramus! said on August 16, 2006

Clever CSS indeed ... but I myself used to work like you did: just stretch out that 1pixel image.

A diferent method I've been using is based on the CSS Star Rater thing: background on an UL and just strectch out that one li. This requires 2 images (background and image that indicates the percentage, as the "new" method you've linked to.

Advantage to this method is that one can have a gradient in the progress-li (ex. from red to green), which can't be done with the "new" method (it would always show the end of the gradient, not the beginning).

wbr,
B!

2
Graham B said on August 16, 2006

I always used to use two <div>s, overlayed ontop of each other, one with 100% width and the foremost with 0%, and just increase the % value as required. This method looks nice though.

3
Carly said on July 26, 2007

Your demo link is 404 but from the Barenakedapp.com link i see what you mean. Actually in Google Webmaster tools, the Pagerank for High, Medium, Low and Unassigned are presented like this.

So a nifty trick is to view the source and you can see the Green Bar for High is 18% for example. If you have 100 pages, you can conclude 18 pages currently have a high PR despite what the old toolbar values state.

There are a number of other sites using this method, so you can get some specific data instead of the presented graph with a progress bar "yay" long.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.