public knowledge blog_load(sender Virendra)

                                                                                                                          Nothing shocks me, I am a Software Engineer.

Create Gmail-like loading indicator with ASP.NET Ajax

Posted by Virendra Dugar on February 2, 2009

Now days, the better user experience, richer and more interactive are the key criteria for any web application. It can be easily achieved by Ajax and Ajax is used in almost every web application. One of the best example is Gmail. I love the way they show the loading image on the screen when something happens. I am talking about loading indicator (top/right corner fixed, regardless of how the users scrolls or sizes the window). See the image below.

I wanted to have something like this for my application and I found two ways to create Gmail-like loading image.

Using CSS with Update Progress Control

Add an UpdateProgress control to the page.

Add CSS

That’s it… The result is below.

The thing to understand regarding the CSS is, I have set the top and right to 0 and I have also set the Position attribute to fixed.  fixed attribute will keep the image fixed on the screen regardless of scrolling.

On W3C School,

Fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

But there is a problem with this approach and that is unfortunately this solution does not work for IE6 as CSS position: fixed works with all major browsers except… IE6!

So let’s move to the second option.

Using AlwaysVisibleControl of Ajax Control ToolKit.

Add an updateProgress and AlwaysVisibleControl (AjaxControlToolKit).

Add CSS

That’s it… The result is below.

Two properties to understand about AlwaysVisibleControl are HorizontalSide and VerticalSide. HorizontalSide takes 3 values Center, Left and right and VerticalSide takes 3 values Bottom, Middle and Top. This solution works for IE 6 also.

I found some more great articles to place an animated gif over any control:

http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.htmlhttp://mattberseth.com/blog/2007/06/aspnet_ajax_rendering_a_gmaill.html

Enjoy……

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: