loading screen for asp.net

Question

I realize that there are many threads already posted that deal with this very question and I have looked threw ALOT of them and tried many different approaches to my problem. Unfortunately i can't get any of them to work for my specific situation. So here goes,

Im working in visual studios 2010 using c# and asp.net. I have already developed a web site as an internal tool for my department to track employee metrics. The program works by hitting medium sized sql databases via stored procedures and then does some minor calculations and displays the data in a variety of ways including asp:charts, repeaters, and other tables. The program allows for the user to select the date range for which they wish to view the metrics. Obviously as the range increases so does the hang time the user experiences. I've been attempting to create a load screen that will show anytime the pages post back to the server. My initial thought was to use css and a div with a loading gif that is show when the page load event is triggered however i can't seem to get the thing to work properly. I've read/seen many examples of jquery and ajax but have no experience with either. I've tried

 $(document).ready(function () {
 $('#loadGif').hide();
 });

<img id="loadGif" runat="server" src="img/loading.gif" alt="Please wait while the site information is updated" />

and

 document.getElementById("loading").className = "loading-visible";
 var hideDiv = function () { document.getElementById("loading").className = "loading- invisible"; };
 var oldLoad = window.onload;
 var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
 window.onload = newLoad;    

<div id="loading" class="loading-invisible">
<img id="loadGif" runat="server" src="img/loading.gif" alt="Please wait while the site information is updated" />
</div>

and a few other techniques. Clearly I'm failing to understand how to properly use these techniques. All i want is to have a loading screen show while the page is loading the data so the user knows their request is being processed. Any help would be greatly appreciated thanks

sorry here is css:

      /*--------------------==================LOADING SCREEN=================----------------  -*/
  /*this is what we want the div to look like
   when it is not showing*/

  div.loading-invisible
  {
   /*make invisible*/
    display:none;
  }

/*this is what we want the div to look like
  when it IS showing*/
div.loading-visible
{
/*make visible*/
display:block;

/*position it 200px down the screen*/
position:absolute;
top:200px;
left:0;
width:100%;
text-align:center;

  /*in supporting browsers, make it
    a little transparent*/
  background:#fff;
  filter: alpha(opacity=75); /* internet explorer */
  -khtml-opacity: 0.75;      /* khtml, old safari */
 -moz-opacity: 0.75;       /* mozilla, netscape */
   opacity: 0.75;           /* fx, safari, opera */
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}

 /*---------------- Another loading screen attempt with ajax---------*/
 #updateProgress
{
 background-color:#CF4342;
 color:#fff;
 top:0px;
 right:0px;
 width:100%;
 position:fixed;
}

#updateProgress img 
{
  vertical-align:middle;
  margin:2px;
}
   /*---------------- Another loading screen attempt with jquery---------*/
   div#spinner
  {
    display: none;
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(loading.gif) no-repeat center #fff;
    text-align:center;
    padding:10px;
    font:normal 16px Tahoma, Geneva, sans-serif;
    border:1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index:2;
    overflow: auto;
}

Answer 1

I found away around my issue by using a response flush on my master page content, which contains a plan text loading message that is moved to invisible when the body content is loaded. not the best way i'm sure but it works for me.

Answer 2

You should be able to use the UpdateProgress control for this. Something like this should point you in the right direction:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>  

Here are the styles, which you can use to adjust opacity as needed:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}