Update progress in center of screen

Update proggress bar For Iphone   Click Here

Download the code sample

At the moment I'm working on making a web application we just developed more user friendly and more appealing to the end users.

The application uses a few ASP.NET Ajax controls so I was pretty surprised when the customer sent me an email saying that he liked all the dynamic loading and the fact that he could reorder "things" using drag&drop and saving them without waiting the page to reload, but it took him a while to understand was going on. The first time he clicked the button, and since nothing happened, he thought that something was going wrong, so he kept clicking on the button, an yet nothing happening.

The problem was that since all the Ajax interactions happen behind the scenes asynchronously, the user doesn't understand what's going on: sometimes the user doesn't need to know what's going on (like when you are just reloading some data), but when he presses a button he needs to know that he did the right thing and that something is happening. With the "old style" ASP.NET a postback would have been initiated, so it was obvious that something was happening, but how to do it using Ajax?

That is pretty easy to accomplish with ASP.NET: just drop in anUpdateProgress control and it will be displayed when an Ajax postback happens.

But, as default behavior, the UpdateProgress is displayed in the position where it is added to the page, so, if your page is longer than a scroll page, the indicator could not be visible: it has to be positioned relative to the browser window and not relative the html document.
At first I looked at how to hook into the script that displays the div in order to change the position via script, but while chatting with Daniela (which is an UIX and web designer) she said: "Why don't you just use the fixed positioning CSS attribute?"

And she was right, much easier than hooking into ASP.NET Ajax scripts. I definitely need to improve my CSS knowledge .

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 yearScottGu recommended a few websites to download some indicators from, and I really likedwww.ajaxload.info. This site dynamically generate an activity indicator for you, with the type and colors you prefer.

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 ...