CSS Progress Bar
93 15 32K (1 Today)
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.
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.
You Might Like . . .
Comments15
Join the community to add your comment. Already a deviant? Log In
so nice. thnx
Nice nice!
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();
--------------
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();
--------------
very nice man 
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?
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?
SamusAranFreakHobbyist Interface Designer
Well, I'll have to google it xD
This is really good for things like redirections
This is really good for things like redirections
Join the community to add your comment. Already a deviant? Log In