Deviation Actions

Ashung's avatar

CSS Progress Bar

By Ashung
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:
Comments15
Join the community to add your comment. Already a deviant? Log In

thanks for your woek

linkwro's avatar
saeid-xplod's avatar
iRafall's avatar
Great !
Haha did not even guessed.
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();
--------------
TWoro's avatar
Enten-Mann's avatar
Ashung's avatar
SamusAranFreak's avatar
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
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
Well, I'll have to google it xD

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