August 28, 2004 4:41 PM
On my first website, Javascript routines littered almost every
page. The most useful of those scripts were the loading
indicator which was my attempt at simulating a "Loading" progress bar
for a web page.
Demo:
Code:
<form name="clkform" action="javascript:void(0);"> <input name="clk" size="25" style="background-color:transparent;border:none;" type="text" value="Loading ----"/> </form> <script language="Javascript" type=""> var run=0,count=0; orig=new Date(); var messages1=new Array("Loading ----", "Loading |---", "Loading ||--", "Loading |||-", "Loading ||||"); function GetIndex1() {if(count==5) {count=0;return(0);} else return(count++);} function doload() {if(run==0){ document.clkform.clk.value=messages1[GetIndex1()]; window.setTimeout("doload();", 500);}} function loaded(){ var today;today=new Date(); if(run==0) {run=(today-orig)/1000; document.clkform.clk.value="Loaded in "+run+" seconds."; }} doload(); </script>
Put the above code fragment in your page in the beginning of your page
after the body tag. Then add an onLoad attribute to your body tag
so that it looks like so:
<body onLoad="loaded();">
If you do not prefer the onLoad method, you can always keep a call
to loaded() at the end of your page below the closing body tag
using script tag instead:
<script language="Javascript" type="">loaded();</script>