Loading Process

A Unskilled progress bar. This script is useful if you have a heavy page that takes long time to load or a time consuming server side process.

Js File



[code]zoomss = '';
zoom=document.getElementById('flo_wrapper');
zooms=document.createElement("div");
zooms.innerHTML=zoomss;
zoom.parentNode.insertBefore(zooms,zoom);

/************************************************************************************************************
(C) [You must be registered and logged in to see this link.] November 2009

This is a script from [You must be registered and logged in to see this link.] 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!

[You must be registered and logged in to see this link.]
Admer

************************************************************************************************************/
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 moveProgressBar(1);
setTimeout('demoProgressBar()',100);
}
}


window.onload = demoProgressBar;

Css File

Code:

[code]#dhtmlgoodies_progressPane {
background:#000;
position:fixed;
width:100%;
height:100%;
filter:alpha(opacity=80);
opacity:.80;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
left:0;
top:0;
z-index:500000 !important;
text-align:center;
}
#dhtmlgoodies_progressBar_bg {
position:absolute;
left:50%;
top:50%;
width:300px;
height:20px;
border:none;
background-color:transparent;
margin-left:-150px;
margin-top:-20px;
text-align:center;
}

#dhtmlgoodies_progressBar_outer {
position:absolute;
left:0;
top:0;
width:0;
height:100%;
overflow:hidden;
}

#dhtmlgoodies_progressBar {
position:absolute;
left:0;
top:0;
width:300px;
background-color:#fff;
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:gray;
z-index:500000 !important;
width:100%;
height:100%;
left:0;
top:0;
position:absolute;
font-family:arial;
font-size:1em;
font-weight:700;
line-height:20px;
}[/code]

Preview

Save this code as .js extension or combine it with your other .js files...

ok sir