Ashung's avatar

CSS Progress Bar

93 15 32K (1 Today)
By Ashung   |   
Published: May 17, 2009
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. :)
Comments15
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
solbi2019's avatar

thanks for your woek

linkwro's avatar
linkwroHobbyist Digital Artist
THANKS <3
iRafall's avatar
Great !
Haha did not even guessed.
chrischmitt's avatar
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();
--------------
Ashung's avatar
AshungProfessional Interface Designer
Thank you.
SamusAranFreak's avatar
SamusAranFreakHobbyist Interface Designer
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?
Ashung's avatar
AshungProfessional Interface Designer
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.
SamusAranFreak's avatar
SamusAranFreakHobbyist Interface Designer
Well, I'll have to google it xD

This is really good for things like redirections :)
hombre-cz's avatar
hombre-czHobbyist Photographer
cool ... nice work :p
1Reticle's avatar
哈哈,好久不见你的作品了。很强大,对网页不是很有研究。但是很好看哦。^_^
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In