Live Demo (FF, IE6 and IE7) | Download

the markup for the progress panel is below. 

<asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;">
    <div class="container">
        <div class="header">Loading, please wait...</div>
        <div class="body">
            <img src="img/activity.gif" />
        </div>
    </div>
</asp:Panel> 

i am making use of 4 style classes: progress, container, header and body.  Below are the style classes and a screen shot with the corresponding element highlighted in blue (I used the IE Developer Toolbar to take the screenshots.  If you haven't downloaded this tool, you should do it now).  You can view the complete stylesheet definition here.  

this is the animated gif I am using for my progress indicator.   

if you don't care for it you should be able to replace this with one of your liking (try googling 'AJAX Progress Indicators')   

for this sample, I also incorporated a technique I described here that allows you to render the progress panel directly over a specific control.  To accomplish this, I am calculating the center of the control and manually placing the progress panel over the center of the rendered GridView.  I make this calculation using the OnUpdating and OnUpdated animations of the UpdatePanelAnimationExtender.  During OnUpdating I first fetch the progress panel and a reference to the GridView using the $get shortcut function.  Once I have the reference I use the DomElement classes getBounds function to get the coordinates that make up the boundary.  Then I do a little math to determine where to position the progress.  Here are the OnUpdating and OnUpdated functions ...

function onUpdating(){
    // get the update progress div
    var pnlPopup = $get('<%= this.pnlPopup.ClientID %>'); 

    //  get the gridview element        
    var gridView = $get('<%= this.gvCustomers.ClientID %>');
    
    // make it visible
    pnlPopup.style.display = '';        
    
    // get the bounds of both the gridview and the progress div
    var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
    var pnlPopupBounds = Sys.UI.DomElement.getBounds(pnlPopup);
    
    //  center of gridview
    var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(pnlPopupBounds.width / 2);
    var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(pnlPopupBounds.height / 2);        

    //    set the progress element to this position
    Sys.UI.DomElement.setLocation(pnlPopup, x, y);           
}

function onUpdated() {
    // get the update progress div
    var pnlPopup = $get('<%= this.pnlPopup.ClientID %>'); 
    // make it invisible
    pnlPopup.style.display = 'none';
}  

that's it.  Enjoy!
Author: matt@mattberseth.com