ProgressBar

head:

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

body:

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