Gmail-like loading indicator with ASP.NET

How to make a Gmail-like loading indicator with ASP.NET Ajax

Step 1 - Add an UpdateProgress control to the page

First thing you have to add an UpdateProgress to your ASP.NET page.

<asp:UpdateProgress ID="UpdateProgress1" runat="server"
                     DynamicLayout="false">
    <ProgressTemplate>
        <img src="Images/ajax-loader.gif" /> Loading ...
    </ProgressTemplate>
</asp:UpdateProgress>

You can put this code anywhere inside the page, but I suggest you put it at the end. I didn't specify any AssociatedUpdatePanelID because I want the loading indicator to appear for all the UpdatePanel I have on the page: if you want it only for some of them you have to set it.

Step 2 - Add CSS

 #UpdateProgress1 {
   background-color:#CF4342;
   color:#fff;
   top:0px;
   right:0px;
   position:fixed;
 }

#UpdateProgress1 img {
   vertical-align:middle;
   margin:2px;
 }

The trick is to set the position attribute to fixed: it will make the top and right dimensions relative to the browser window and not to its original position (as with relative) or to containing element (as with absolute).
This CSS will put the indicator on the top right corner of the window, as the Gmail indicator.

Step 3 - Add an activity indicator image

But we can do it even better then gmail, we could add a nice animated activity indicator. Last year http://mentalized.net/activity-indicators/to download some indicators.

This is the animated gif I created to fit nicely into my UpdateProgress control:
And this is how the final Gmail-like loading indicator looks like:

Loading ...