Implementing a progress bar

How to implement a basic, gracefully degrading progress bar using HTML and CSS.


A recent question to the css-d mailing list raised the issue of progress bars and how they should be marked-up and styled. Specifically, the question dealt with how the progress bar could be linked whilst remaining valid.

The core issue is one that persistently arises — how to link block level elements — but the general question raised several issues, and led me to wonder how ‘best’ a progress bar can be marked-up and styled. Here, I present my favoured approach.

The method

I’ve chosen to represent the progress as a definition list, with definition terms (dt) for the ‘completed’ part (.done) and the part that ‘remains’ (.left):

<dl class="progress">
    <dd class="done"><a href="/">23%</a></dd>

    <dd class="left"><a href="/">77%</a></dd>

Each progress value is then the definition (dd) of that term. Notice that these values are each linked individually, although these links would likely lead to the same location. Ideally, the markup would be:

<a href="/">
    <dl class="progress">
        <dd class="done">23%</dd>

        <dd class="left">77%</dd>

but valid HTML prevents us from doing this. Eric Meyer’s written about this shortcoming; his suggestion is to allow any element to support the href attribute. This makes an awful lot of sense, would allow us to simply link the entire list in this example and, hopefully, might be adopted in HTML 5. My one concern, demonstrated well in this case, is that, without any styling, this would normally look pretty ugly; all text would be blue, underlined, and — probably — become a bit of a distraction.

This structure is, I believe, about as accurate a portrayal of the data as is possible using HTML. It also ensures a reasonable display if CSS is unavailable:


All of the relevant information is present, allowing screenreaders and other non-visual agents to read and digest it. Now, onto the styling.

First off, let’s size each individual progress bar and colour their backgrounds.

.progress dl,
.progress dl *
	{ margin: 0; padding: 0; }

.progress .done { width: 23%; background-color: #9DB029; }
.progress .left { width: 77%; background-color: #eee; }

Note that I’m also resetting all margins/padding within this entire element. This gives us the following presentation:


To ensure the links fill each bar, make them block elements with 100% width and height:

.progress a { display: block; width: 100%; height: 100%; }

The progress values are hidden using the ‘text-indent trick’. We’ll also hide the definition terms ("completed", "left"):

.progress a { text-indent: -9000px; }
.progress dt {display: none; }

And our progress bar now looks as follows:


The only big step that remains is to float each bar to the left, aligning them horizontally. Whilst we’re at it, we’ll also set the overall list’s height and width, and remove the ‘left’ background colour which was purely for the purposes of this demonstration. An overall border on the list will be required to enclose our entire progress bar, and a pixel of padding inside will make this nice and pretty:

.progress dl { height: 20px; width: 300px; }
.progress .done, .progress .left { height: 100%; }


dl.progress *
    { margin: 0; padding: 0; }

dl.progress {
    padding: 1px; border: 1px solid #ddd;
    height: 20px; width: 300px; }

.progress dt
    { width: 0; height: 0; overflow: hidden; }

.progress .done,
.progress .left
    { height: 100%; float: left; }

.progress .done
    { background-color: #9DB029; }

.progress .done
    { width: 23%; }
.progress .left
    { width: 77%; }

.progress a {
    display: block; width: 100%;
    height: 100%; text-indent: -9000px; }


In response to Eddie’s comment, I’ve produced a modified jQuery progress bar which uses the markup and styling from this article.



Wed 21 Oct 2009 04:54


TheWebTuts said:

Tutorial added to

Wed 16 Dec 2009 02:34

Aaron Bassett

Aaron Bassett said:

Would you not be better using the meter tag?

Wed 16 Dec 2009 02:44

Jon D

Jon D said:

Nice, i wonder if using "left" isn’t a bit confusing though, wouldn’t "remaining" be clearer…?

Wed 16 Dec 2009 02:49

Gerben van Dijk

Gerben van Dijk said:

would have to agree with aaron here — use the html5 meter tag :)

Wed 16 Dec 2009 03:14

Eddie van Dorland

Eddie van Dorland said:

Looks good and works great, just a bit concerned about the fact it doesn’t move due to no variables?!? 23% & 77%?!?

How do I get it to move?

Wed 16 Dec 2009 03:48

Five Minute Argument

Five Minute Argument said:

@Aaron, Gerben: You’re right: this is strictly an HTML4 solution. There’s actually a progress element which is, of course, the most suitable. However, in both those cases, the values are stored as attributes, and I’m unaware of a current solution to derive the width from those, other than by using javascript. With only a single element to style, I’m not sure this approach will fly, although there’s some potential for a follow-up post on this topic — thanks for your feedback.

@Jon: Probably only because of the profusion of non-semantic class names out there, but I guess you’re right :-)

@Eddie: This is just for the static styling of a progress bar at a given state. It would be fairly simple to update the values using javascript, and the progress bar from the jquery-ui library would be ideal for this; its default styling, however, doesn’t degrade gracefully at all, so a combination of the two would be perfect if you’re looking for something that needs to update dynamically.

Wed 16 Dec 2009 08:30

Future Webs

Future Webs said:

Thanks for the post, Looks good.

Wed 16 Dec 2009 11:50


Amit said:

Nice post..thanks for sharing..Will this work in Firefox?

Wed 16 Dec 2009 16:10

Five Minute Argument

Five Minute Argument said:

@Amit: Yes; Firefox is my primary development browser, but this should work in all modern browsers and even — gasp — IE7.

Mon 21 Dec 2009 09:54

Hazır Emlak Sitesi Paketi

Hazır Emlak Sitesi Paketi said:

good share! thank you for this page!

Tue 5 Jan 2010 11:32

Web Design Cambridgeshire

Web Design Cambridgeshire said:

Thanks for this — good ideas.

Sun 8 Aug 2010 20:21

Las Vegas Web Design

Las Vegas Web Design said:

I've tried it, and it works great! Thanks!

<a href="">Las Vegas Web Design</a>

Sun 8 Aug 2010 20:29

Las Vegas Web Design

Las Vegas Web Design said:

I've tried it, and it works great! Thanks!

<a href=""> Las Vegas Web Design</a>

Sun 12 Sep 2010 09:19

best interest rates on savings

best interest rates on savings said:

I got it to work with HTML but not with CSS

Tue 5 Oct 2010 08:08

hotels in Killarney

hotels in Killarney said:

Same problem here, i cannot get it to work with CSS. I will be back in my hotel room later today and I will try it again

Sat 5 Mar 2011 19:17

golf swing speed

golf swing speed said:

well i have tried it and no problem at all.

Sat 7 May 2011 00:10


Thu 23 Jun 2011 06:50

chw 12

chw 12 said:

great stuff. i’m just learning css so this tutorial is very useful for me. thanks a bunch!



Wed 28 Dec 2011 03:52

SEO tips

SEO tips said:

Great article! Thanks for sharing with us!

Fri 9 Mar 2012 00:28


Vasan said:

Great article. i have tried it, it is working but how to align this one as center?

Fri 12 Dec 2014 19:41

canada cialis prescription

canada cialis prescription said:

I am actually thankful to the holder of this site who has shared this impressive piece of writing

at here.

Tue 16 Dec 2014 12:15

canada drugstore online

canada drugstore online said:

you’re in reality a good webmaster. The web site loading pace

is incredible. It kind of feels that you are doing

any unique trick. Furthermore, The contents are masterpiece.

you have performed a magnificent activity in this subject!

Tue 16 Dec 2014 15:07

cialis usa pharmacy

cialis usa pharmacy said:

You’re so cool! I do not think I have read through something

like this before. So good to find another person with a few

genuine thoughts on this subject matter. Seriously..

many thanks for starting this up. This web site is something that is needed on the

internet, someone with some originality!

Fri 19 Dec 2014 04:56

generic cialis canada

generic cialis canada said:

Hi, constantly i used to check blog posts here in the early hours in the break of day, since i enjoy to learn more and more.

Sat 20 Dec 2014 11:29

generic drugs

generic drugs said:

Hello my friend! I want to say that this post is amazing, nice written and include approximately all significant infos.

I would like to see more posts like this .

Tue 23 Dec 2014 13:07

cialis pharmacy coupon

cialis pharmacy coupon said:

What a data of un-ambiguity and preserveness of valuable knowledge about unexpected emotions.

Wed 24 Dec 2014 16:46

cialis pills

cialis pills said:

Hi! This is kind of off topic but I need some advice from an established

blog. Is it very hard to set up your own blog? I’m not very techincal but

I can figure things out pretty fast. I’m thinking about setting up my own but I’m not sure where to

start. Do you have any points or suggestions?

With thanks

Tue 30 Dec 2014 08:44

generic cialis canada pharmacy

generic cialis canada pharmacy said:

Hi there, I would like to subscribe for this weblog

to obtain newest updates, so where can i do it please help out.

Tue 30 Dec 2014 09:43

online prescription

online prescription said:

Hurrah! Finally I got a web site from where I be able to really take

valuable facts regarding my study and knowledge.

Tue 30 Dec 2014 11:40

viagra from canada

viagra from canada said:

Wow that was odd. I just wrote an really long comment but after I

clicked submit my comment didn’t show up. Grrrr…

well I’m not writing all that over again. Anyway, just wanted to say fantastic


Thu 1 Jan 2015 08:00

canadian cialis

canadian cialis said:

Very great post. I simply stumbled upon your blog and wanted to mention that I have really

loved surfing around your blog posts. In any

case I will be subscribing in your rss feed and I am hoping you write once more soon!

Thu 8 Jan 2015 15:16

buy cialis in canada online

buy cialis in canada online said:

For the reason that the admin of this site is working, no question very rapidly it will be renowned, due to its feature


Sun 11 Jan 2015 05:05

cialis online without prescription

cialis online without prescription said:

Hi there, just became alert to your blog through Google,

and found that it’s truly informative. I am gonna watch out for brussels.

I will be grateful if you continue this in future.

Many people will be benefited from your writing.


Mon 12 Jan 2015 10:46

much does cialis cost

much does cialis cost said:

I’d like to thank you for the efforts you have put in writing this blog.

I’m hoping to view the same high-grade blog posts by you in the future as well.

In fact, your creative writing abilities has encouraged me to get my own blog

now ;)

Tue 13 Jan 2015 00:10

canadian pharmacy online

canadian pharmacy online said:

This site was… how do I say it? Relevant!! Finally I've found something which helped me.


Fri 16 Jan 2015 19:12

Discount rx

Discount rx said:

I was recommended this blog by my cousin. I’m not sure whether this post is written by him as

no one else know such detailed about my difficulty.

You’re amazing! Thanks!

Sat 17 Jan 2015 08:23

Cialis patent expiration date canada

Cialis patent expiration date canada said:

I couldn’t refrain from commenting. Well written!

Sun 18 Jan 2015 05:02

Costco drug prices

Costco drug prices said:

Hello, just wanted to tell you, I enjoyed this

article. It was inspiring. Keep on posting!

Sun 18 Jan 2015 08:32

Purchase cialis online canada

Purchase cialis online canada said:

Good post. I learn something totally new and

challenging on sites I stumbleupon on a daily basis.

It’s always exciting to read content from other authors and use

a little something from other sites.

Wed 21 Jan 2015 04:54

cialis canada pharmacy

cialis canada pharmacy said:

Hello there! I could have sworn I've been to this website before but after browsing through some of

the post I realized it’s new to me. Anyways, I’m definitely delighted I found

it and I’ll be bookmarking and checking back frequently!

Thu 22 Jan 2015 10:18

canadian drugs without prescription

canadian drugs without prescription said:

The Common pharmacy is basically very affordable regardless if you

are from no matter which sections of the society.

The value is reasonable for anyone and everyone; you must want

of buying it. Once choice is manufactured, examine the suitable keep.

Soon after finding the medicine, one has consumed it. Just take the remedies with bare drinking water.

my canadian pharmacy

Sat 24 Jan 2015 16:42

buy cialis in canada

buy cialis in canada said:

Really when someone doesn’t understand then its up to other viewers that they will assist, so here it occurs.

Wed 4 Feb 2015 00:00

canadian drugs without prescription

canadian drugs without prescription said:

Hi, Neat post. There is a problem along with

your web site in web explorer, might test this?

IE nonetheless is the marketplace chief and a big element of folks will leave out your great writing due to this problem.

Thu 19 Feb 2015 12:08

canadian pharmacy cialis

canadian pharmacy cialis said:

Greate article. Keep posting such kind of info on your

blog. Im really impressed by it.

Hi there, You have performed a fantastic job.

I’ll definitely digg it and in my view recommend to my friends.

I am confident they will be benefited from this website.

Mon 23 Feb 2015 03:05

north west pharmacy canada

north west pharmacy canada said:

Great blog! Is your theme custom made or did you download it from somewhere?

A theme like yours with a few simple adjustements would really make my blog stand out.

Please let me know where you got your design. Thank you

Mon 23 Feb 2015 07:10

buy cialis online pharmacy

buy cialis online pharmacy said:

I visited many websites except the audio quality for audio songs current at this site

is genuinely excellent.

Wed 4 Mar 2015 22:37

payday loans

payday loans said:

tabrdr payday loans 8]]] payday loans =-] payday loans =-] payday loans 8]]] payday loans 8]]]

Sat 14 Mar 2015 18:19

cialis coupon

cialis coupon said:

Undeniably imagine that that you said. Your favourite justification seemed to be at

the internet the easiest thing to take into accout

of. I say to you, I definitely get annoyed whilst people consider

issues that they just don’t understand about. You controlled to hit the nail

upon the highest and also defined out the entire thing with no

need side-effects , other folks can take a signal.

Will likely be back to get more. Thank you

Mon 16 Mar 2015 17:59

payday loans

payday loans said:

unfnoosq payday loans 6378 payday loans HhGPx sameday payday loans online >:-[

Tue 17 Mar 2015 06:42

payday loans

payday loans said:

qyyirf payday loans qJjUQ payday loans 2303 payday loans 3509 payday loans %-[[[ payday loans VzAoNj

Fri 20 Mar 2015 07:00

cheap cialis

cheap cialis said:

qocfirjj cheap cialis 3108 generic cialis NmxOjc viagra 3050 viagra :-O

Sat 21 Mar 2015 01:03

payday loans

payday loans said:

wtcshpuk payday loans 2192 payday loans 4870 payday loans XJclr

Sun 22 Mar 2015 11:16

viagra online

viagra online said:

rqzvxh viagra online 7286 cialis 9738 buy viagra mnAyTP cialis 5011

Wed 25 Mar 2015 15:04

dyson dc41 multi floor reviews

dyson dc41 multi floor reviews said:

Its not my first time to pay a quick visit this website, i

am browsing this site dailly and obtain nice facts from here daily.

Leave a comment