Show Loading Progress Graphically

[Total: 0    Average: 0/5]

This shows how to have a status bar show the progress of something.

Head Code:

<style type=text/css>
.d1 {     position: absolute;	 
     top:50;	 
     left:100;	 
     z-index:5;     
     color:black;     
     width:200;      
     heigth: 20; 	 
     clip:rect(0,200,20,0);	 
     background-color:red; 	 
     border-width:1;	 
     border-style:solid;
}
.d2 {
     position: absolute;
	 top:50;
	 left:100;
	 z-index:10;
     color:black;
     width:200; 
     heigth: 20; 
	 clip:rect(0,200,20,0); 
	 background-color:white; 
	 border-width:1;
	 border-style:solid;
	}
</style>

Body Code:

<div class=d1 id=d1 name=d1></div>
<div class=d2 id=d2 name=d2></div>

<script>
var count=0;
var MAXcount=10; // number of intervals
var width=200; // width of status bar.
function incOneIE() {
  var _i = parseInt(width / MAXcount) * (++count);
  document.all.d1.style.zIndex=20;
  document.all.d1.style.clip="rect(0,"+_i+",20,0)";
  document.all.d1.style.width=_i;
  if (count >= MAXcount)
    stopIt();
}
var doagain = null;
function stopIt() { if (doagain != null) clearInterval(doagain); }
function startIt() {
stopIt();
if (document.all)
  doagain = setInterval("incOneIE()",500); // 1/2 second interval
}
</script>
<a href="javascript:startIt()">click to inc status bar</a>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *