Deviation Actions

CSS Progress Bar

92 Favourites

17 Comments

33K Views

CSS Progress Bar
This tutorial will show you how to create a fixed width Vista style progress bar use XHTML/CSS in my way.

*Use CSS Sprites.
*Valid XHTML and CSS.

You can download the source code. I hope you like it.

Published: May 17, 2009

Creative Commons Attribution 3.0 License

Comments15

Join the community to add your comment. Already a deviant? Log In

solbi2019Jan 31, 2020

thanks for your woek

linkwroMar 16, 2012

THANKS <3

saeid-xplodOct 26, 2011

so nice. thnx

confessions1988May 11, 2010

Nice nice!

iRafallJan 30, 2010

Great !
Haha did not even guessed.

chrischmittDec 28, 2009

Nice Work, Ashung !

If you don't want it to repeat, modify the Javascript as follow :

--------------------
var i = 0;
function animate() {
if (i <= 100) {
document.getElementById(\"test\").style.width = i + "%";
i++;
setTimeout(animate, 500);
}

}
animate();
--------------

TWoroNov 1, 2009

great man

Enten-MannJul 21, 2009

very nice man

AshungJul 22, 2009

Thank you.

SamusAranFreakJun 8, 2009

Just a question...

When the animation of the bar is complete, it repeats.
How can I turn off the repeating?

How can I modify the code to make sure the bar remains complete after the animation is over?

AshungJun 13, 2009

I'm so sorry. I'm not good at server-side language and JavaScript. This JavaScript just make the bar animation, and it can't working in real work. You can ask your programer friends or Google it.

SamusAranFreakJun 13, 2009

Well, I'll have to google it xD

This is really good for things like redirections