Loading

CSS
<style type="text/css">
.overlay
{
border: black 1px solid;
z-index: 100;
width: 100px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
opacity: 0.75;
filter: alpha(opacity=75);
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
display:block;
}
</ style>

JavaScript
<script type="text/jvavscrript">
function SetProgressPosition(Default) {
var myWidth;
var myHeight;
if (typeof (window.innerWidth) == 'number') {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if (document.body && (document.body.clientWidth || document.body.clientHeight))
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
if(Default)
{
document.getElementById('divProgress').className = "overlay";
document.getElementById('divProgress').style.display = "block";
document.getElementById('divProgress').style.height = (myHeight+150)+ "px";
document.getElementById('divProgress').style.width = myWidth + "px";
document.getElementById('imgLoading').focus();
}
else
{
document.getElementById('divProgress').className = "";
document.getElementById('divProgress').style.display = "none";
document.getElementById('divProgress').style.height = 1+ "px";
document.getElementById('divProgress').style.width = 1+ "px";
}
}
</script>

HTML
<div id="divProgress" style="display:none;">
<table width="100%" style="height:100%;">
<tr valign="middle">
<td align="center">
< img id="imgLoading" src="../../Images/LoadingRotate.gif" alt="loading" /> 
Please wait...
</td>
</tr>
</table>
</div>
< br />
</div>