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.
:origin()/pre00/1ae3/th/pre/i/2009/115/6/3/file_status_icons_by_ashung.png){kind=icon}
:origin()/pre00/e62a/th/pre/i/2008/289/b/9/chameleon_style_no_1_by_ashung.png)
:origin()/pre00/f246/th/pre/i/2008/236/6/0/color_candy_photoshop_style_by_ashung.png)
:origin()/pre00/4dc8/th/pre/i/2009/022/3/2/chameleon_style_no_2_by_ashung.png)
:origin()/pre00/df59/th/pre/i/2008/292/a/b/easy_searchbox_by_ashung.png)
:origin()/pre00/b67b/th/pre/f/2013/031/f/a/code_basics__hover_box_by_ginkgografix-d5tcbyk.png)
:origin()/pre00/a577/th/pre/f/2013/035/4/a/code_basics__tabs_outside_by_ginkgografix-d5tt1y5.png)
:origin()/pre00/a9ce/th/pre/i/2007/345/b/d/__blue_dunes_by_ginkgografix.jpg)
:origin()/pre00/00d7/th/pre/i/2010/062/2/7/orange_dots_free_journal_skin_by_fantasy_alive.jpg)
:origin()/pre00/ac80/th/pre/i/2010/262/c/e/__code_basics__border_thumbs_by_ginkgografix-d2z26rw.jpg)
:origin()/pre00/ea5e/th/pre/f/2013/031/7/9/code_basics__inside_tabs_by_ginkgografix-d5tcv92.png)
:origin()/pre00/e5b2/th/pre/i/2009/311/a/2/glossy_apple_badges_by_mactyler.png)
:origin()/pre00/8e29/th/pre/i/2009/115/e/a/free_round_thumbs_by_brgtt.png)
:origin()/pre00/1a84/th/pre/f/2013/030/7/9/code_basics__hover_menu_by_ginkgografix-d5t9dxe.png)
:origin()/pre00/ecff/th/pre/i/2009/148/e/4/xinch_css_easy_install_by_moonfreak.png)
:origin()/pre00/b947/th/pre/i/2010/148/5/5/progress_bars_pack_by_plakkert.jpg)
:origin()/pre00/e0b0/th/pre/i/2009/139/a/9/css_progress_bar_by_ashung.png)
Haha did not even guessed.
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();
--------------
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?
This is really good for things like redirections