Download progress bar

Put this into your <HEAD> section

	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		background-color:#E2EBED;
		margin:0px;
		padding:0px;
		height:100%;
		width:100%;
		line-height:130%;
		font-size:0.9em;
		text-align:center;
	}
	#pageContent{
		width:760px;
		margin:0 auto;
		text-align:left;
		border-left:1px solid #000;
		border-right:1px solid #000;
		background-color:#FFF;
		height:100%;
	}
	#pageContent p{
		padding-left:10px;
		padding-right:10px;
	}
	#dhtmlgoodies_progressPane{
		width:100%;
		height:100%;
		background-color:#FFF;
		z-index:5000;
		position:absolute;
		left:0px;
		top:0px;
		
	}
	#dhtmlgoodies_progressBar_bg{
		position:absolute;
		left:50%;
		top:50%;
		width:300px;
		height:20px;
		border:1px solid #000;
		background-color:#EEE;
		margin-left:-150px;	
		margin-top:-20px;
		text-align:center;
	}
	#dhtmlgoodies_progressBar_outer{
		position:absolute;
		left:0px;
		top:0px;
		width:0px;	
		height:100%;
		overflow:hidden;	
	}
	
	#dhtmlgoodies_progressBar{
		position:absolute;
		left:0px;
		top:0px;
		width:300px;
		background-color:#184EB8;
		filter: Alpha(Opacity=0, FinishOpacity=100,Style=1,StartX=0, StartY=0, FinishX=200,FinishY=20) ;
		height:100%;
		z-index:5000;
	}
	#dhtmlgoodies_progressBar_txt{
		color:#000;
		z-index:10000;
		width:100%;
		height:100%;
		left:0px;
		top:0px;
		position:absolute;		
		font-family:arial;
		font-size:0.8em;
		line-height:20px;	/* Same as height of progress bar */
	}
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/		
	var progressbar_steps = 50;	// Total number of progress bar steps.
	
	/* Don't change any of these variables */
	var dhtmlgoodies_progressPane = false;
	var dhtmlgoodies_progressBar_bg = false;
	var dhtmlgoodies_progressBar_outer = false;
	var dhtmlgoodies_progressBar_txt = false;
	var progressbarWidth;
	var currentStep = 0;
	function moveProgressBar(steps){
		if(!dhtmlgoodies_progressBar_bg){
			dhtmlgoodies_progressPane = document.getElementById('dhtmlgoodies_progressPane');
			dhtmlgoodies_progressBar_bg = document.getElementById('dhtmlgoodies_progressBar_bg');
			dhtmlgoodies_progressBar_outer = document.getElementById('dhtmlgoodies_progressBar_outer');
			dhtmlgoodies_progressBar_txt = document.getElementById('dhtmlgoodies_progressBar_txt');
			progressbarWidth = dhtmlgoodies_progressBar_bg.clientWidth;
		}
		if(!steps){
			dhtmlgoodies_progressBar_outer.style.width = progressbarWidth + 'px';
			dhtmlgoodies_progressBar_txt.innerHTML = '100%';
			setTimeout('document.getElementById("dhtmlgoodies_progressPane").style.display="none"',50);
		}else{
			currentStep+=steps;
			if(currentStep>progressbar_steps)currentStep = progressbar_steps;
			var width = Math.ceil(progressbarWidth * (currentStep / progressbar_steps));
			dhtmlgoodies_progressBar_outer.style.width = width + 'px';
			var percent = Math.ceil((currentStep / progressbar_steps)*100);
			dhtmlgoodies_progressBar_txt.innerHTML = percent + '%';
			if(currentStep==progressbar_steps){
				setTimeout('document.getElementById("dhtmlgoodies_progressPane").style.display="none"',50);
			}
		}
		
		
		
		
	}
	
	/* The function below is only needed for this demo
	
	To move the progress bar , call the function moveProgressBar() 
	
	example: 
	moveProgressBar(1)
	to move it one step.
	
	*/
	function demoProgressBar()
	{
		if(currentStep<progressbar_steps){
			moveProgressBar(1);
			setTimeout('demoProgressBar()',100);
		}
	}
	
	
	window.onload = demoProgressBar;
	
	</script>

Put this into your <BODY> section

<div id="dhtmlgoodies_progressPane">
	<div id="dhtmlgoodies_progressBar_bg">
		<div id="dhtmlgoodies_progressBar_outer">
			<div id="dhtmlgoodies_progressBar"></div>
		</div>
		<div id="dhtmlgoodies_progressBar_txt">0 %</div>
	</div>
</div>
<div id="pageContent">
<img src="http://www.dhtmlgoodies.com/images/heading3.gif">
<p>This script is typically useful if you have a server side process that takes some time. Instead of showing a blank page while the server
is working, show a progress bar which indicates that something is comming.</p>
<p>This requires of course that you could output content to the browser while your server side script is working. In PHP, you might have to use ob_implisit_flush()
for this to happen.</p>
</div>

Configuration

You use Javascript to configure the progressbar. Example: the progressbar_steps variable is used to indicate total number of steps. If it's set to 50 as in this example, the progress bar will move like this: 2%, 4% 6% ... 100%, i.e. 50 steps.

The moveProgressBar() function is called whenever you want to move the progress bar. The argument to this function is how many steps you now want to move the bar. This argument is optional. If left out, the progress bar will simply move to the end.

Comments

No one has commented this - be first!

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.