Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. is the best JavaScript resources

Over 2000+ free Javascript
at Website

Sampled by
Actually, I was at updating my WindowsXP box the other day and was looking at their XP progress bar that scrolls as it is searching for updates for your computer. Well, I wasn't happy with the way it was scrolling and thought I could do better, so I did! :)

Anyway, the bar's width, height, colors, border attributes, number of blocks, and scrolling speed are all customizable. The script is designed to let you use multiple bars on the same page with each having a different look. The effect works in Internet Explorer 5+, Netscape 6+, and Mozilla/Firebird browsers, but performs the best in Internet Explorer, especially when using more than one bar.

The script does not use any event handlers so it should play nice with other scripts without modification.

There are ten different parameters which controls how each bar looks and acts: var xyz = createBar( width, height, background_color, border_width, border_color, block_color, scroll_speed, block_count, action_count, action_string )

Each bar, when assigned to a variable has several control methods you can call directly via javascript or in a link. Each of these is described below, along with an example which will control the bar above. For reference, the bar has been assigned to the variable bar2.

Method Example Description
var.toggleBar() toggle pause This method will toggle the pause status of the bar. If it is paused, it will un-pause it, and vice-versa. The code for the link at left is:
<a href="javascript:bar2.togglePause()">toggle pause</a>
var.hideBar() Hide Bar 2 This method will show the bar. If it is already visible, it will do nothing. The code for the link at left is:
<a href="javascript:bar2.hideBar()">Hide Bar 2</a>
var.showBar() Show Bar 2 This method will hide the bar. If it is already hidden, it will do nothing. The code for the link at left is:
<a href="javascript:bar2.showBar()">Show Bar 2</a>

WinXP Progress Bar I


  1. Copy and paste the following script in the HEAD section of your page:

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

  2. Upload the "xp_progress.js" file to your server.

  3. Add xp_progress bar(s) to your page by invoking the createBar() function, surrounded by javascript tags, wherever you want the bar to appear in your page. Example:

    <script language="javascript">
    var bar2=createBar(500,10,'black',1,'black','white',45,15,2,'bar2.togglePause()');