Pure CSS Animated Progress Bar

posted on:March 27, 2008

Pure CSS Animated Progress Bar

Here’s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.

Take a look at the demo
| Download zip file

The Concept

We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.

Markup

To keep it as meaningful as possible I used definition list (DL) to list for several values. For single progress bar you can use any element you want. I love paragraphs so I used P in my example.

<dd>
	<span><em style="left:100px">50%</em></span>
</dd>

I decided to use inline styles for left EM placement. It is more convenient to write both values at the same place at once.

Animation

How is it done? Using animated gif of course. Remember those? SPAN has a 200px wide background gif that animates from "zero" to 200px. No matter what percentage we use it goes all the way and stops. Effect of stopping at certain percentage is done with EM as I mentioned earlier.

EM placement

In my example I use 200 pixels wide progress bar. EM element is also 200px wide. So each percentage is 2px wide. If we want to accurately shift the EM we need to multiply percentages with 2.

i.e. 50% will mean 100px left offset, 24% will mean 48px offset, 75% – 150px etc. You get the picture.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (55 Comments)

Catar4x
March 27, 2008

It's bluffing ! With only CSS ! Thanks a lot for the script ;)
henri - blog webdesign
March 27, 2008

Excellent, I wrote an article about that script on my blog : webdesign.2803.com/css/faire-une-barre-de-progression-en-css/
Yves
March 27, 2008

Nice, it's bluffing ! But there is still one thing : Is it usefull ? I don't realy think so, you can't calculate any real progression if you have to. And it's very intrusive ... But hey well done !
Peter
March 28, 2008

nice, but: 1. what kind of progress bar is it when you cannot control it's progress (once displayed) 2. incorrect usage of definition list, ex: the definition of "Ability to annoy people" is not 80%
cssglobe
March 28, 2008

This is a demonstration, it's not a new way of using progress bars. Css is presentational tool, there's not much you can do with it besides pure presentation. My point was to present creative usage of css and maybe make readers think outside the box. @Peter: Not sure what you mean with incorrect usage if DL? Why exaclty would this be incorrect?
fwolf
March 28, 2008

well ... the only real use I'm seeing in this would be: To use this progress bar inside of statistical apps, eg. your state-of-the-art log /visitor statistic tool. cu, w0lf.
GUESS
March 28, 2008

very creative use of css and the animated gif. how'd you come across this? just trying to push yourself a bit?
BTM
March 30, 2008

Yes, it's not really just CSS - you're using an animated GIF - one could achive the same result with just the gif, without CSS, but then you wouldn't have the control over where it stops (eg. at 40%, 60% etc) - I can see some use of that, like in a eStore checkout, instead of showing "Step 3 of 4 - delivery address" you could show the progress bar :)
cssglobe
March 30, 2008

If you look at it that way, it's (almost) never just CSS. We (almost) always use images, don't we :)
fedmich
March 30, 2008

Nice idea. :)
Mauro De Giorgi
March 31, 2008

Beautiful! thanks :)
Markavian
March 31, 2008

Perhaps a better title: "Pure CSS Animated bar chart" Using CSS for image simple manipulation (cropping), like with rollover buttons, and other tricks is a great way to make clean and simple tweaks at the CSS/HTML level without having to reload your graphics editor. I don't think I can see a use for this one though- I'd sooner use javascript to set the values dynamically, and default to a plain-filled results bar if javascript was disabled.
Simon Gow
March 31, 2008

Very cool! nice and clean concept, although would probably be better if you used classes instead of style attributes.... this could also be easily modifiable by javascript which makes it cool!
Quevin
March 31, 2008

Very nice. I agree with Simon, that we could easily use the DOM to take that % value and use a class without in-line style.
Muralikrishna
April 2, 2008

I go with Simon
Carlos Fernando Benitez Zapata
April 2, 2008

Deseo saber si tienes algun curso sobre el manejo excelente de CSS, felicitaciones
Carlos Fernando Benitez Zapata
April 2, 2008

Respecto al curso de CSS, si lo tienes o no, dime que bases se debe tener porque deseo implementar cosas novedosas en mi sitio web www.empresasquindianas.com muchas gracias nuevamente
vincent Voyer
April 3, 2008

Ok, i don't get it, the gif itself can do the samething, you just hide the end of it and it's ok ... There's nothing but 2 html tags, an animated gif, and the overflow:hidden property here ... This is not css related but all about animated Gifs. You should have done something better with small jquery script + 1px width png non animated transparent image + a little html markup (like <span><strong></strong></span>) + make the strong and span width to 0 with css + add a background color to the span + add your background image to the strong + launch script ! Ok this is not pure CSS but at least it's not just an animated gif.
cssglobe
April 3, 2008

This is pure CSS solution. The entire idea was to use only css. And it's not just animated gif either... I am using one more element placed ABOVE the animated gif, that is faking the end of progress movement.
Quoka
April 4, 2008

Sorry mate, its about 50 lines of cade more than you need.... div { px;px;padding: 5px; "comment-648">
Quoka
April 4, 2008

Arrghhh it the HTML got stripped. Was simply... <div]<div]80%</div]</div]
Quoka
April 4, 2008

3rd time lucky.. (div) (div) 80% (/div) (/div)
Rafael Masoni
April 5, 2008

It's not really useful, but really creative! Congratulations!
gwinn
April 7, 2008

nice, i'm like to use it!
Micael
April 9, 2008

Ow :OO Very good. Congratulations.
Herbalife
April 11, 2008

That's pretty hot. I can see the CSS animated bar being applied into a lot of different usages through out web widgets and applications.
Jay
April 12, 2008

Nice job... you publish an animated-gif progress bar, call it "pure css" and now it's littering the web and preventing people who are actually looking for a "pure css" progress bar, from finding what they are looking for. Whhhelll done.
Tanguy
April 16, 2008

Well done, I love this progress bar, good job. But i would like to do with different color of bar and it's a big job to change or create a new bar with another color. Thanks a lot for your job.
Max
April 20, 2008

Pretty useless. I dont see the point on creating a css loading bar, since if its just for animating, a flash swf can do it using only 2k. And then you say, hey, what about ppl who dont have the flash player plugin? Come on! Who dont have it! Btw, you can even publish your animation on flash4
David Blanchet
April 24, 2008

Hey Alen don't you just love when you create something and offer it up to the public and some who really don't even need to comment only comment to say its useless lol got to love em.
cssglobe
April 25, 2008

Yes, David, I enjoy reading these comments. But what gets me more excited is when the entire idea I am trying to share and explain is misunderstood and misinterpreted.
Nima Fatemi
May 3, 2008

Wonderfulllllllllllllllllllllllllllllllllllllllllllllll
John Faulds
May 5, 2008

I think the use of a definition list is pretty iffy in this example. If the example is of a questionnaire and the percentages indicate how many people responded to a particular statement, then a far more 'meaningful' content structure would've been to use a table. But as there's no opening statement to explain what either of the statements in the <dt>s or the percentages in <dd>s (which don't add up to 100), are actually about it's a bit hard to tell what the meaning is.
Seb
May 9, 2008

Thanks, I was able to make a super fake virus with your script! Web address: www.sebruiz.com
Arun
May 14, 2008

Progress bars are dynamic one. So you need some amount JavaScript to operate it. Then, what is the use of 'Pure CSS' animated progress bar?
Jack Neary
May 16, 2008

Ha! M$crosoft should adopt that into all their progress bars. They are always wrong anyway, so it doens't really matter if this measures and progress or give real feedback. It's pretty, and it doesn't take as much resource wise.... Well done.
sotec software
May 21, 2008

i will try it. thx.
Jeremy
May 22, 2008

Thank you Alen. I was looking for something like this. I used it for my file upload form. I created a new bar.gif animation, that displays the entire bar from frame 1. I am updating the position of bg_cover.gif based on the actual percentage of file transfer. It look great! My only problem is that the bg_cover.gif is briefly not displayed (maybe while loading) . It think I need to figure out how to preload the bg_cover.gif
Stoik
May 24, 2008

Thanks ... very nice idea ...
cam filmi
June 1, 2008

I was looking for something like this. thank you very much for this useful information.
Jon
June 4, 2008

You can keep it!! Nice experiment, but not useful.
niladri
June 20, 2008

Nice but what if I want a circular progress bar? Any idea??
Berthold
August 17, 2008

Thanks Alen! awesome technique.
Herbalife
August 22, 2008

CSS is excellent to make cool things on a site without a lot of over head.
Douglas
September 12, 2008

Very nice and congratulations! Tks! Hideki
tibolan
November 26, 2008

Very clever ! easy to deploy, crossbrowser... good job !
pinksoler
December 9, 2008

in jsp i can't use it
sura1
December 10, 2008

Hi! May I take the liberty of translate your article from English to German and explain it in my blog Sura 1 Artworks? Many thanks in advance! Sura 1
HerbalDistribuidor
December 12, 2008

Wow!! CSS has lots more to do...
blues
January 8, 2009

Good job , Css Rocks :)
vexorian
February 22, 2009

Max: CSS works almost everywhere, flash doesn't and will get blocked by some stuff as well, CSS not being code, it will be cute , there are no CSS blockers out there.
rduke15
March 11, 2009

It can be done without any gifs, and with some javascript to show the actual progress of something. Here is another demo I found, which seems more useful as a starting point for something real: alma.ch/demos/css-progress-bar-demo.html
Hassan
March 15, 2009

Hi, Really good stuff here but one problem : Why the progress bar cannot be printed with the page ?
Nathan
April 5, 2009

This is awesome, what other wonders can be done with CSS
Craig Beaumont
April 15, 2009

For a nice progress bar, check this out -> webappers.com/progressBar/

Sorry, the comment form is closed at this time.