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)

1. Catar4x
   March 27, 2008

   It's bluffing ! With only CSS ! Thanks a lot for the script ;)

2. henri - blog webdesign
   March 27, 2008

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

3. 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 !

4. 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%

5. 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?

6. 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.

7. 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?

8. 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 :)

9. 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 :)

10. fedmich
    March 30, 2008

    Nice idea. :)

11. Mauro De Giorgi
    March 31, 2008

    Beautiful! thanks :)

12. 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.

13. 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!

14. 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.

15. Muralikrishna
    April 2, 2008

    I go with Simon

16. Carlos Fernando Benitez Zapata
    April 2, 2008

    Deseo saber si tienes algun curso sobre el manejo excelente de CSS, felicitaciones

17. 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 http://www.empresasquindianas.com muchas gracias nuevamente

18. 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.

19. 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.

20. Quoka
    April 4, 2008

    Sorry mate, its about 50 lines of cade more than you need.... div { width:216px;height:41px;padding: 5px; background:url(http://cssglobe.com/lab/progress_bar/bg_bar.gif) no-repeat 0 0; } div div { margin: 3px;text-indent:-8000px; background:url(http://cssglobe.com/lab/progress_bar/bar.gif) no-repeat 0 0; width: 80%; } <div><div>80%</div></div>

21. Quoka
    April 4, 2008

    Arrghhh it the HTML got stripped. Was simply... <div]<div]80%</div]</div]

22. Quoka
    April 4, 2008

    3rd time lucky.. (div) (div) 80% (/div) (/div)

23. Rafael Masoni
    April 5, 2008

    It's not really useful, but really creative! Congratulations!

24. gwinn
    April 7, 2008

    nice, i'm like to use it!

25. Micael
    April 9, 2008

    Ow :OO Very good. Congratulations.

26. 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.

27. 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.

28. 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.

29. 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

30. 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.

31. 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.

32. Nima Fatemi
    May 3, 2008

    Wonderfulllllllllllllllllllllllllllllllllllllllllllllll

33. 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.

34. Seb
    May 9, 2008

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

35. 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?

36. 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.

37. sotec software
    May 21, 2008

    i will try it. thx.

38. 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

39. Stoik
    May 24, 2008

    Thanks ... very nice idea ...

40. cam filmi
    June 1, 2008

    I was looking for something like this. thank you very much for this useful information.

41. Jon
    June 4, 2008

    You can keep it!! Nice experiment, but not useful.

42. niladri
    June 20, 2008

    Nice but what if I want a circular progress bar? Any idea??

43. Berthold
    August 17, 2008

    Thanks Alen! awesome technique.

44. Herbalife
    August 22, 2008

    CSS is excellent to make cool things on a site without a lot of over head.

45. Douglas
    September 12, 2008

    Very nice and congratulations! Tks! Hideki

46. tibolan
    November 26, 2008

    Very clever ! easy to deploy, crossbrowser... good job !

47. pinksoler
    December 9, 2008

    in jsp i can't use it

48. 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

49. HerbalDistribuidor
    December 12, 2008

    Wow!! CSS has lots more to do...

50. blues
    January 8, 2009

    Good job , Css Rocks :)

51. 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.

52. 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: http://alma.ch/demos/css-progress-bar-demo.html

53. Hassan
    March 15, 2009

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

54. Nathan
    April 5, 2009

    This is awesome, what other wonders can be done with CSS

55. Craig Beaumont
    April 15, 2009

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

Sorry, the comment form is closed at this time.