Today is . Page created 09/14/06

Percentage Percentage Progress Bar Progress Bar

Instead of displaying "Open page..." in the status bar when opening a Web page, you can use this script to display the ratio of loaded data and also have a personal message in the taskbar when loaded. It's more effective and cool. Look in the below taskbar to see the effect. If you missed it, [  Reload ] this page and see it again.

We have tested the code in IE6.0, Firefox1.5.0.6, Opera9.01, Netscape8.1 and AOL Explorer1.2. This script worked in all platforms with the exception of Firefox1.5.0.6 where the effect will not be visible. It degrades well and you will not get any error messages.

Depending on your knowledge of HTML and javascripts, this is an easy one (1) part copy and paste code that goes in the <HEAD> section of your document with minimal reconfigurations*.

*     These reconfigurations are for the custom message that will be seen after the page is loaded.

<!---- Reconfigurations <HEAD> Section ---->

    setTimeout ("progressBar()", timePeriod);
  }
  else
  {
    window.status = "Your Message Goes Here";
    document.body.style.display = "";
  }
}
progressBar();
</SCRIPT>
</head>

For Your Information For your Information:     On the site you get the code, it is set up as a complete HTML document. Just study it and copy just the part that is the script itself located in the <HEAD> section.

On A Final Note     You can if you want change the progress bar character | to that of something else if you so desire. See below where and howto.

var percent = 70,
          timePeriod = 100;

function getBar()
{
        var retBar = '';
        for(i = 0; i < percent; i++)
        {
                retBar += "|";
        }
        return retBar;

We 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 ]