First time here? You are looking at the most recent posts. You may also want to check out older archives or the tag cloud. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS. Thank you for visiting! (hide this)

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 an UpdateProgress 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 smile_regular.

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 ScottGu recommended a few websites to download some indicators from, and I really liked www.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 ...

Download the code sample

UPDATE: I changed the CSS after Lorenzo comment adding a few pixel around the image and vertically aligning the text

UPDATE2:Laurent Duveau wrote a nice post on how to make it work with IE6, using the AlwaysVisibleControl that is inside the AJAX Control Toolkit: http://weblogs.asp.net/lduveau/archive/2007/05/25/ajax-loading-indicator-like-gmail.aspx

kick it on DotNetKicks.com

Technorati tags: , , ,

posted on Thursday, May 17, 2007 5:16 PM

Comments on this entry:

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

Left by LorenzoC at 5/17/2007 6:54 PM

Here is my proposal:
Instead of duplicating the Gmail alert (right top corner), position dinamically the alert at the mouse cursor left.

I would also change the alert color since red is usually for extreme alert, and the user may think there is an error going on. You could use somthing like orange for max visibility or even better green or blue, that usually stand for "normal operation".

Last suggestion, I am not sure the animated gif is a good idea (putting an animated icon inside an "pseudo-animated" alert). Be careful for the baseline, I guess the text is laying at the bottom line of the image (should be vertically centered). Last detail, the animated gif has got the rotating dots too close to its borders, I would add at least a couple of pixels.


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

Left by LorenzoC at 5/17/2007 7:04 PM

About the gif you can just add a border to the image and "vertical-align:middle" as image CSS attribute (add an ID).

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

Left by jrummell at 5/18/2007 1:37 AM

Excellent post, thanks. Is it possible to use this loading indicator with standard (non-Ajax) postback?

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

Left by Simone Chiaretta at 5/18/2007 1:51 AM

@jrummel: with a "standard" postback the page is reloaded, so, you can display the indicator, but it will disappear as soon as the new page is loaded inside the browser. And also, you have to handle all by yourself in javascript, you cannot use the ASP.NET Ajax framework to do that, or better, you could, but will not be worth the added complexity

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

Left by jrummell at 5/18/2007 2:19 AM

That's what I was afraid of. I'm still learning ASP.Net Ajax, and haven't had much time to play with it yet. Thanks for the info.

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

Left by John S. at 5/18/2007 3:43 AM

Have you tested this in IE6?

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

Left by Simone at 5/18/2007 9:12 AM

@John: Actually I didn't... only tested with IE7 and FF2, but you are right, I should test it

# GMail-like Loading Indicator with ASP.NET Ajax

Left by you've been HAACKED at 5/18/2007 5:46 PM

GMail-like Loading Indicator with ASP.NET Ajax

# GMail-like Loading Indicator with ASP.NET Ajax

Left by Community Blogs at 5/18/2007 5:58 PM

Simone Chiaretta , a member of the Subtext development team (among other open source projects), has been

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

Left by Shawn at 5/19/2007 8:19 AM

We actually do something very similar on one of our current projects. I don't think position fixed works cross browser. We ended up using the AlwaysVisibleControl from the Ajax Control Toolkit along with update progress to do the same thing. Works great in all browsers.

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

Left by Rohit at 5/19/2007 5:32 PM

Hi,
the above code doesn't work .

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

Left by Simone Chiaretta at 5/19/2007 5:38 PM

@Rohit: What do you mean it doesn't work? In which conditions doesn't work?

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

Left by Michele at 5/21/2007 9:52 PM

I have recently done an indicator like this, in order to make the position fixed attribute compatible with IE >= 5.5 and IE < 7, you have to add this code in the page:

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
/* Hack: position fixed su IE > 5.5, IE < 7*/
#wait {
position: absolute;
left: 0;
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
background-color:Red;
color:#FFF;
}
</style>
<![endif]>
<![endif]-->

Sorry but I don't remember where I found this trick...

Ciao.

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

Left by Simone Chiaretta at 5/22/2007 12:35 AM

Doh... CSS expressions...

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

Left by Michele at 5/22/2007 12:40 AM

I don't like too... But it's the only way I found to fix it...

# May 22nd Link Listing: ASP.NET, Visual Studio, Silverlight, WPF and .NET

Left by ScottGu's Blog at 5/23/2007 6:18 AM

One of the things I'm going to try and start doing is to do a weekly post of useful links on .NET related

# May 22nd Link Listing: ASP.NET, Visual Studio, Silverlight, WPF and .NET

Left by Top ASP.NET Items at 5/23/2007 6:24 AM

One of the things I'm going to try and start doing is a weekly blog post of useful/interesting links

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

Left by MzK at 5/23/2007 6:35 AM

To Michele :
Where exactly must I add the code you wrote to make it IE6 compatible ? thanks

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

Left by Matt Berseth at 5/23/2007 8:42 AM

Very nice. I had a similiar requirement except I had to place the animation over the control being updated. Here was the solution I came up with ...
http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html

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

Left by vc at 5/23/2007 6:55 PM

good one

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

Left by Michele at 5/23/2007 8:24 PM

MzK:
add it in the page, after the css links

<link rel="stylesheet" media="all" type="text/css" href="../css/styles.css"></link>
<link rel="stylesheet" media="print" type="text/css" href="../css/print.css"></link>
<!--[if gte IE 5.5]>
[...]
<![endif]-->

Ciao.

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

Left by Mike at 5/23/2007 9:14 PM

I think browsers should start displaying the loading bar for async requests. Problem solved!

But in the mean time this is a good solution. I really wish that ASP.NET AJAX could have:

A. Update panel smart enough to really only change what needs to be changed (so if you delete a row from a gridview, not the whole gridview is replaced, just the row is deleted)
B. (based on A) allow indication of the changed HTML.

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

Left by Simone Chiaretta at 5/23/2007 9:31 PM

@mike: I don't know about the point A) but I think that Nikhil Kothari released a thing called UpdateControls which should address your point B: drive the user attention to what has changed:
www.nikhilk.net/UpdateControls12.aspx

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

Left by Polu at 5/23/2007 11:45 PM

When you scroll down windows, the progress indicator go out.
The fixed position of element working only in IE7 (http://www.w3schools.com/css/pr_class_position.asp). How to fix position in ie 6.0. Gmail developers made it! How? Can anybody explain it.

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

Left by MzK at 5/24/2007 1:49 AM

Thanks Michele, it works great. Sorry, i'm only learning.

One other thing, it tried to make it display at the bottom of the web page, by using the bottom: css tag and changing your code scrollTop to scrollBottom, yet it still appears at the top. Any thoughts ?
Thanks

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

Left by Michele at 5/24/2007 3:19 AM

Polu: I wrote how to do it some post before

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

Left by Shawn at 5/25/2007 1:29 AM

To all the people asking how to get it to work in IE6...look where I posted above. Instead of using your own css and using position fixed use the AlwaysVisibleControl from the AjaxControlToolkit inside of your updateprogress control. The loading panel will scroll and work as it should.

# AJAX loading indicator like GMail

Left by Laurent Duveau at 5/25/2007 5:16 PM

Simone Chiaretta wrote a very nice post about building a Gmail-like loading indicator (that means top

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

Left by Laurent Duveau at 5/25/2007 5:17 PM

Hi,
I illustrate the use of AlwaysVisibleControl in a post : http://weblogs.asp.net/lduveau/archive/2007/05/25/ajax-loading-indicator-like-gmail.aspx

# AJAX &amp;quot;waiting&amp;quot; indicator

Left by Greg Postlewait at 5/25/2007 11:58 PM

Let's face it, AJAX is the sliced bread of the Internet these days. And with all the toolkits out there,...

# ASP.NET, Visual Studio, Silverlight, WPF and .NET

Left by tongdoudpj at 5/31/2007 1:58 PM

One of the things I'm going to try and start doing is a weekly blog post of useful/interesting links on .NET related topics that I've found on the web.

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

Left by nicolas at 5/31/2007 11:48 PM

I just found this neat little site called webscriptlab.com that lets you generate loading icons on demand for your applications. Pretty cool stuff!

# Indik&#225;tor AJAX volan&#237; na pozad&#237;

Left by Skippov blog at 6/22/2007 3:27 AM

Pri browsen&#237; na internete som narazil na jeden veľmi pekne uroben&#253; gener&#225;tor animovan&#253;ch GIF-ov - http

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

Left by gopal at 6/26/2007 5:30 PM

Hi, how to display the loading image at the center of the browser window (regardless of resizing)?

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

Left by Simone at 6/26/2007 5:37 PM

@gopal: You could try using the AlwaysVisibleControl and set the position to center;
http://weblogs.asp.net/lduveau/archive/2007/05/25/ajax-loading-indicator-like-gmail.aspx

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

Left by gopal at 6/27/2007 8:51 PM

thanks Simone. that works.......

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

Left by simone at 6/27/2007 8:56 PM

My pleasure :)

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

Left by m2g at 7/4/2007 1:05 PM

Has anyone found a good way to get this to work on an UpdateProgress within a ContentPlaceHolder? The only way I could get it to work was to create a <div> within the <ProgressTemplate> tag and then assign the CSS style to the id of the div. This worked great... but is there a better way?

Example:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="yoyo">Processing...</div>
</ProgressTemplate>
</asp:UpdateProgress>

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

Left by Simone at 7/4/2007 1:09 PM

The autogenerated id for the updateprogress will change since it will be inside another control: just change you css accordingly

# [Reference]How to make a Gmail-like loading indicator with ASP.NET Ajax

Left by JerryZhao at 7/4/2007 10:56 PM

AtthemomentI'mworkingonmakingawebapplicationwejustdevelopedmoreuserfriendlyandmore...

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

Left by Andriu46 at 7/9/2007 9:22 PM

How to make a Gmail-like loading indicator with PHP ajax

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

Left by Mortaza Doulaty at 10/17/2007 11:08 PM

I used the code with Master Pages, it is not working...
How can I handle this?

Comments have been closed on this topic.