AJAX loading indicator like GMail

Simone Chiaretta wrote a very nice post about building a Gmail-like loading indicator (that means top/right corner fixed, regardless of how the users scrolls or sizes the window) with an AJAX UpdateProgress control, an animated gif and some CSS; you can read his great article there :

How to make a Gmail-like loading indicator with ASP.NET Ajax
http://codeclimber.net.nz/archive/2007/05/17/How-to-make-a-Gmail-like-loading-indicator-with-ASP.NET-Ajax.aspx


Unfortunatly his solution don't work for the one like me who still have IE6 at work, as css position: fixed works with all major browsers except... IE6!

Someone on his comments propose to use CSS hack and expression to make it happens in IE6, but with the magic of AJAX Control Toolkit and the AlwaysVisible control you can make it easier and cleaner!

The final result in IE6:

Here is the code I use:

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button2" runat="server"
           OnClick="Button2_Click" Text="Async Postback" />
           Server time: <asp:Label ID="Label2" runat="server"
                             Text="Label"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress2"
 runat="server">
    <ProgressTemplate>
        <div class="Progress">
            <img src="Images/ajax-loader.gif" />
            Loading ...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"
 runat="server" TargetControlID="UpdateProgress2"
 HorizontalSide="Right" VerticalSide="Top" HorizontalOffset="0">
</asp:AlwaysVisibleControlExtender>

 

And the CSS: 

.Progress
 {
   background-color:#CF4342;
   color:White;
 }
 
.Progress img {
   vertical-align:middle;
   margin:2px;
 }


You can download the source code here.

 

So how does the AlwaysVisibleControl work ?
In fact it simply use JavaScript to check browser and version :

  • If IE<=6 then it uses absolute position and internally take advantage of the Animation Framework to fix the div.
  • Else (IE>=7, FF2, etc...) it simply uses css position: fixed.


Here is the interesting part from the AlwaysVisible control source code:

this._animate = (Sys.Browser.agent == Sys.Browser.InternetExplorer
 && Sys.Browser.version < 7);
if (this._animate) {
  // Initialize the animations to use the actual properties
  this._animation = new AjaxControlToolkit.Animation.MoveAnimation(
      element, this._scrollEffectDuration, 25, 0, 0, false, 'px');

  // Make the control use absolute positioning to hover
  // appropriately and move it to its new home
  element.style.position = 'absolute';
} else {
  // Make the control use fixed positioning to keep it from moving
  // while the content behind it slides around
  element.style.position = 'fixed';
}

 

Note: Later I found another good one from Matt Berseth :
Using an UpdatePanelAnimationExtender to place an animated gif over a GridView:
http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html

7 Comments

  • Good stuff man,
    I didn't like all the CSS+JS hacks and this seems to be the best solution to the IE6 compatibility problem.

  • Why don't you just do position: absolute; top: 0; right: 0;z-index: 5000;?

    Then just add some padding for the inside and you are done.

  • ahahaha, nevermind. i read this wrong. i thought you were trying to position the red box (which is what the always visibile control is...).

    i'm gonna go over to the corner now...

  • @Darren: Because this won't show if you scroll bottom to click an async button.

  • Ajax loading generator on webscriptlab.com is really cool, there is one privew box which can figure out which indicator is best for your need.

  • While working on this loading image i came across the following:
    *setting DIV position to 'absolute' is working on IE7 and not on IE6,FF2
    *setting DIV position to 'fixed' is working on IE6,FF2 but not IE7
    * and "AlwaysVisibleControlExtender" seems to work with IE6 and FF2 (without setting the DIV position) and is not working for IE7.

    How can i make IE7 work with toolkit control?
    thanks

  • As in the above article and actual thread(referred on top of this article), it says IE7,FF2 requires "fixed" positioning and IE6 required "absolute". But its totally the other way for me.

    For IE7 i am using "absolute" position to make it work. ('fixed' is not working here). for IE6,FF2 "fixed" position works.

    The Toolkit extender works with IE6 and FF2 and not with IE7 :(

    The workaround right now i am using is, if browser is IE7 i set the DIV postion to "absolute", for others i ignore it as Toolkit extender takes care of it.

    This workaround is no harm for me as it works fine, but i have 2 worries:
    1) I want the image to display in the middle of the page. but for IE7 i need to manually set the image to display at centre (handle resize of page too)
    2) The DIV positioning is working the otherway for me.

    thanks,
    gopal

Comments have been disabled for this content.