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. :)
Catar4x 27 Mar, 2008
With only CSS !
Thanks a lot for the script ;)
henri - blog webdesign 27 Mar, 2008
Yves 27 Mar, 2008
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 28 Mar, 2008
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 28 Mar, 2008
@Peter: Not sure what you mean with incorrect usage if DL? Why exaclty would this be incorrect?
fwolf 28 Mar, 2008
cu, w0lf.
GUESS 28 Mar, 2008
BTM 30 Mar, 2008
cssglobe 30 Mar, 2008
fedmich 30 Mar, 2008
Mauro De Giorgi 31 Mar, 2008
Markavian 31 Mar, 2008
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 31 Mar, 2008
this could also be easily modifiable by javascript which makes it cool!
Quevin 31 Mar, 2008
Muralikrishna 2 Apr, 2008
Carlos Fernando Benitez Zapata 2 Apr, 2008
Carlos Fernando Benitez Zapata 2 Apr, 2008
vincent Voyer 3 Apr, 2008
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 3 Apr, 2008
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 4 Apr, 2008
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>
Quoka 4 Apr, 2008
<div]<div]80%</div]</div]
Quoka 4 Apr, 2008
(div) (div) 80% (/div) (/div)
Rafael Masoni 5 Apr, 2008
Congratulations!
gwinn 7 Apr, 2008
Micael 9 Apr, 2008
Very good.
Congratulations.
Herbalife 11 Apr, 2008
Jay 12 Apr, 2008
Tanguy 16 Apr, 2008
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 20 Apr, 2008
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 24 Apr, 2008
cssglobe 25 Apr, 2008
Nima Fatemi 3 May, 2008
John Faulds 5 May, 2008
Seb 9 May, 2008
Web address: www.sebruiz.com
Arun 14 May, 2008
Jack Neary 16 May, 2008
Well done.
sotec software 21 May, 2008
Jeremy 22 May, 2008
Stoik 24 May, 2008
cam filmi 1 Jun, 2008
Jon 4 Jun, 2008
Nice experiment, but not useful.
niladri 20 Jun, 2008
Berthold 17 Aug, 2008
Herbalife 22 Aug, 2008
Douglas 12 Sep, 2008
Tks!
Hideki
tibolan 26 Nov, 2008
pinksoler 9 Dec, 2008
i can't use it
sura1 10 Dec, 2008
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 12 Dec, 2008
blues 8 Jan, 2009
vexorian 22 Feb, 2009
rduke15 11 Mar, 2009
Hassan 15 Mar, 2009
Really good stuff here but one problem :
Why the progress bar cannot be printed with the page ?
Nathan 5 Apr, 2009
Craig Beaumont 15 Apr, 2009