Pure CSS Animated Progress Bar

Delicious | Digg | Stumble | Reddit | Subscribe to RSS Feed

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.

pure css progress bar scheme

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

About the author:

cssglobe's image Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

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

Delicious | Digg | Stumble | Reddit | Subscribe to RSS Feed

Comments

Catar4x on 27 Mar, 2008 wrote:

It's bluffing !
With only CSS !

Thanks a lot for the script ;)
henri - blog webdesign on 27 Mar, 2008 wrote:

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

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 on 28 Mar, 2008 wrote:

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 on 28 Mar, 2008 wrote:

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 on 28 Mar, 2008 wrote:

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 on 28 Mar, 2008 wrote:

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

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 on 30 Mar, 2008 wrote:

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

Nice idea. :)
Mauro De Giorgi on 31 Mar, 2008 wrote:

Beautiful! thanks :)
Markavian on 31 Mar, 2008 wrote:

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 on 31 Mar, 2008 wrote:

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 on 31 Mar, 2008 wrote:

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 on 2 Apr, 2008 wrote:

I go with Simon
Carlos Fernando Benitez Zapata on 2 Apr, 2008 wrote:

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

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
vincent Voyer on 3 Apr, 2008 wrote:

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 ) + 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 on 3 Apr, 2008 wrote:

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 on 4 Apr, 2008 wrote:

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%;
}
80%
Quoka on 4 Apr, 2008 wrote:

Arrghhh it the HTML got stripped. Was simply...
Quoka on 4 Apr, 2008 wrote:

3rd time lucky..
(div) (div) 80% (/div) (/div)
Rafael Masoni on 5 Apr, 2008 wrote:

It's not really useful, but really creative!
Congratulations!
gwinn on 7 Apr, 2008 wrote:

nice, i'm like to use it!
Micael on 9 Apr, 2008 wrote:

Ow :OO

Very good.

Congratulations.
Herbalife on 11 Apr, 2008 wrote:

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 on 12 Apr, 2008 wrote:

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 on 16 Apr, 2008 wrote:

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 on 20 Apr, 2008 wrote:

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 on 24 Apr, 2008 wrote:

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 on 25 Apr, 2008 wrote:

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 on 3 May, 2008 wrote:

Wonderfulllllllllllllllllllllllllllllllllllllllllllllll
John Faulds on 5 May, 2008 wrote:

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 on 9 May, 2008 wrote:

Thanks, I was able to make a super fake virus with your script!

Web address: www.sebruiz.com
Arun on 14 May, 2008 wrote:

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 on 16 May, 2008 wrote:

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 on 21 May, 2008 wrote:

i will try it. thx.
Jeremy on 22 May, 2008 wrote:

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 on 24 May, 2008 wrote:

Thanks ... very nice idea ...
cam filmi on 1 Jun, 2008 wrote:

I was looking for something like this. thank you very much for this useful information.
Jon on 4 Jun, 2008 wrote:

You can keep it!!

Nice experiment, but not useful.
niladri on 20 Jun, 2008 wrote:

Nice but what if I want a circular progress bar? Any idea??
Berthold on 17 Aug, 2008 wrote:

Thanks Alen! awesome technique.
Herbalife on 22 Aug, 2008 wrote:

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

Very nice and congratulations!
Tks!
Hideki
tibolan on 26 Nov, 2008 wrote:

Very clever ! easy to deploy, crossbrowser... good job !
pinksoler on 9 Dec, 2008 wrote:

in jsp
i can't use it
sura1 on 10 Dec, 2008 wrote:

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 on 12 Dec, 2008 wrote:

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