Hi,
Please see the following example
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Coolite.Sandbox.Temp.LoadingMask.Default" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Loading mask</title>
<style type="text/css">
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
}
#loading img {
margin-bottom:5px;
}
#loading .loading-indicator{
background:white;
color:#555;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
text-align:center;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="loading-mask" style="">
<div id="loading">
<div class="loading-indicator"><img src="extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading, please wait...
<ext:ScriptManager ID="ScriptManager1" runat="server">
<Listeners>
<DocumentReady Handler="setTimeout(function(){Ext.get('loading').remove();Ext.get('loading-mask').fadeOut({remove:true});}, 250);" />
</Listeners>
</ext:ScriptManager>
<ext:ScriptContainer ID="ScriptContainer1" runat="server">
</ext:ScriptContainer>
Page loading have finished
</form>
</body>
</html>