How to show Page loading progress with modal background

Problem:
In my recent application development I have faced a strange problem to show modal background with page loading progress. I had tried in different way but not working perfectly. Then I have solved it. I think that there is another efficient way to solved it but now this time it is working for me.

Solution:

In css class:
.divModalBackground
{
filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;
width:100%;
background-color: #999988;
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
}

In aspx page:
<asp:Panel ID="Panel1" runat="server" Height="900px" Width="100%" CssClass="divModalBackground" Visible="true" >
<asp:Image runat="Server" ID="ImageLoader" CssClass="LoadingProgress" ImageUrl="../../App_Themes/Black/images/ajax-loader.gif" />
</asp:Panel>


In aspx.cs page I put the code like this:
//to show modal popup at page startup
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
Panel1.Visible = true;
}

In aspx page place this
// to clear the modal background when page load complete, place this code at the end of your page just before the end of the form tag
<script type="text/javascript" >
function init()
{
var objdiv=document.getElementById('<%=Panel1.ClientID%>')
if(objdiv)
{
objdiv.style.visibility = 'hidden';
}
}

init();
</script>