Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations
page 1 of 2
Published: 21 Sep 2006
Unedited - Community Contributed
Abstract
In this article, Scott demonstrates how to work with UpdateProgress control with the help of image animations using AJAX.
by Scott Guthrie
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 67538/ 76
Article Contents:

Introduction

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


View Entire Article

User Comments

Title: PROGRESS STATUS   
Name: NILESH
Date: 2012-10-22 10:58:18 AM
Comment:
Good Images for prograss status
Title: fsa   
Name: fsa
Date: 2012-09-23 1:55:54 PM
Comment:
dfañl
Title: sfds   
Name: sdfsf
Date: 2012-08-22 7:36:06 AM
Comment:
sdsdd
Title: Animation Freezes with Update Progress   
Name: Saravanan.P
Date: 2011-01-12 9:32:34 PM
Comment:
Hi All,
This is the issue which we were trying to figure it out for a long time. But now i have found that it is relating to Browser setting. "Play Animations in Web Page*" is the option that should be enabled for the animation to work.
Title: Is true   
Name: EZE
Date: 2007-09-12 11:49:08 AM
Comment:
The animated gifs stop in IE 6/7 but not in firefox 1/2
Title: Not true   
Name: mark
Date: 2007-03-31 6:07:35 PM
Comment:
Which browser are you using, animated gifs won't stop working when doing an ajax request
Title: How to show status   
Name: Darshan
Date: 2007-01-01 8:09:38 PM
Comment:
If u see my url i have developed a app which takes data from a web servise but that takes a hell lot of time how to show progress of that i mean i have a loop how i can update the status on UI
Title: animated gif with updateprogress   
Name: halsey
Date: 2006-12-12 1:27:40 PM
Comment:
Animated gif will stop working during callback process, making it almost useless.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-03-23 4:14:36 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search