Republished with Permission - Original Article
One of the cool new controls provided with the ASP.NET AJAX
Extensions (aka "Atlas") is the UpdateProgress control. This
control allows you to automatically cause UI to display on a page while an AJAX callback is in progress, and also allows you to provide UI to enable a user to
optionally cancel the AJAX callback if it is taking too long. To use this
control on a page, simply declare it like so:
Listing 1
<atlas:UpdateProgress ID="progress1" runat="server">
<ProgressTemplate>
<div class="progress">
<img src="indicator.gif" />
Please Wait...
</div>
</ProgressTemplate>
</atlas:UpdateProgress>
The content within the <ProgressTemplate> will then
display while an AJAX callback is occuring. You can use CSS rules to
position the content displayed anywhere on the page (for example: you might
want to fade it in directly on top of a GridView or other element).
Developers often use animated images to indicate progress to users as well
within this <ProgressTemplate>.
Alan Le recently posted a cool link to a few useful sites that provide lots of
animated indicator progress icons that you can easily use with the
UpdateProgress control to visually indicate a callback operation:
http://www.napyfab.com/ajax-indicators/
http://www.ajaxload.info/
http://mentalized.net/activity-indicators/
Each site allows you to download spinning gears and progress
icons that you can use. A few examples can be found below:
Figure 1
Figure 2
Figure 3
I posted earlier this week about the new release of the Atlas Control Toolkit that now includes an animation library
that can be used with the ASP.NET AJAX Extensions. Used properly with the
UpdateProgress control they can add a nice visual feel to your site.
Hope this helps,
Scott
