Create Gmail-like loading indicator with ASP.NET Ajax

Virendradugar
Posted by in ASP.NET AJAX category on for Beginner level | Views : 11252 red flag

This article explains how to create Gmail like loading indicator.
Prerequisite

Basic Knowledge of Ajax.

Introduction

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.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false" DisplayAfter="0">

<ProgressTemplate>

   <img src="Images/ajax-loader.gif" alt="loading"/>

   <span style="font-family: Verdana; font-size: small">Loading....</span>

</ProgressTemplate>

</asp:UpdateProgress>

Add CSS

#UpdateProgress1

{

background-color: #CF4342;

color: #fff;

top: 0px;

right: 0px;

position: fixed;

}

#UpdateProgress1 img

{

vertical-align : middle;

margin : 2px;

}


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 AlwaysVisibleControlAjax Control ToolKit


Add an updateProgress and AlwaysVisibleControl (AjaxControlToolKit).

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false" DisplayAfter="0">

<ProgressTemplate>

   <img src="Images/ajax-loader.gif" alt="loading"/>

   <span style="font-family: Verdana; font-size: small">Loading....</span>

</ProgressTemplate>

</asp:UpdateProgress>


 

<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"

TargetControlID="UpdateProgress1" HorizontalSide="Center" VerticalSide="Top"

HorizontalOffset="0">

</cc1:AlwaysVisibleControlExtender>

Add CSS

#UpdateProgress1

{

background-color: #CF4342;

color: #fff;

}




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.

Conclusion

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

Page copy protected against web site content infringement by Copyscape

About the Author

Virendradugar
Full Name: Virendra Dugar
Member Level: Silver
Member Status: Member,MVP
Member Since: 8/11/2009 4:14:05 AM
Country: India

http://jquerybyexample.blogspot.com
Virendra Dugar is experienced Senior Software Developer with over 5 years of hands-on experience working with Microsoft .NET technology (ASP.NET, C#, VB.NET,SQL Server). He is always keen to learn new technology. He holds a Master's Degree in Computer Application & Information technology from Gujarat University in india.In free time, he loves to listen music, read books, play games and do blogging etc. Visit his blogs : http://jquerybyexample.blogspot.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)