Progress bar that resembles the one seen in Window XP's startup screen. ~ Tested in IE5.5, IE6.0, Netscape7.02,Opera7.54 and Firefox0.9.1

P ure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page.

Note: This script by default doesn't perform any action other than animating the progress bar. It's up to you to create helper functions to accomplish any relevant tasks.

For example: (On a Splash Page Intro* that has images on the next page) Have the animated WIN XP Progress Bar on the Splash Page with a little caption something like; "This page will transition when all our images are loaded". Grab the below link (that will open in a new browser window to see a working example.
[ Working Example ]

* Grab the below link to see what is a "Splash Intro" and howto add one into your site.
[ Splash Intro Howto ]

W e have tested the code in IE5.5, IE6.0, Firefox0.9.1, Opera7.54 and Netscape7.02. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and java scripts, this is an easy three (3) part copy and paste code with an upload of an external .js file. The first part of the code will be inserted into the <HEAD> section of the document. This is the part that will be calling the external .js file called xp_progress.js. See below example:

<HEAD>
<script language="javascript" src="xp_progress.js">

/***********************************************
* WinXP Progress Bar- By Brian Gosselin- http://www.scriptasylum.com/
* Script featured on Dynamic Drive- http://www.dynamicdrive.com
* Please keep this notice intact
***********************************************/

</script>
</HEAD>

T he last part of the code wil be pasted anywhere within the <BODY> section you want this effect to appear. And to answer your next question, the answer is "Yes", you can add this animated progress bar in more than one location on a single page. Just add the <BODY> section of code in the various places on your page to achieve this effect. Below are where you can recongifure the different aspects of the progress bar. Play around will the different attributes until you get the effect you want.

T he last thing we will explain are the parameters within the "createBar( )".

To customize the look of the progress bar, simply pass in different values into createBar():

createBar(width,height,'backgroundcolor',borderwidth,'bordercolor','blockcolor',scrollspeed,blockcount);

Definitions Of createBar Terms

width - Total width of the entire bar in pixels.
height - Total height of the entire bar in pixels.
backgroundColor - Background color of the bar. Use valid CSS color or HEX color code value.
borderWidth - The width of the border around the bar, in pixels.
borderColor - The color of the border around the bar. Use valid CSS color or [ HEX ] color code value.
blockColor - The darkest color of the individual blocks. The color will progressively become more transparent. Use valid CSS color or [ HEX ] color code value.
scrollSpeed - The delay, in milliseconds, between each scroll step. Use smaller values for faster scroll speeds.
blockCount - The total number of blocks to use.

Note Of Importance: On any page you are going to have this effect on or any page that will link to a page this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, you will get the little yellow triangle with the error message in the task bar of "Done, but with errors on page". The effect will also not be visible. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/winxpprogressbar2.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/winxpprogressbar3.html/

S elect the links above to see what we are explaining about the Correct and Incorrect URL address.

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]