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

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”>
<asp:Button ID=“Button2” runat=“server”
OnClick=“Button2_Click” Text=“Async Postback” />
Server time: <asp:Label ID=“Label2” runat=“server”
<asp:UpdateProgress DynamicLayout=“false” ID=“UpdateProgress2”
<div class=“Progress”>
<img src=“Images/ajax-loader.gif” />
Loading …
<asp:AlwaysVisibleControlExtender ID=“AlwaysVisibleControlExtender1”
runat=“server” TargetControlID=“UpdateProgress2”
HorizontalSide=“Right” VerticalSide=“Top” HorizontalOffset=“0”>


And the CSS: 


.Progress img {

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: