Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

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:

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

Each site allows you to download spinning gears and progress icons that you can use.  A few examples can be found below:

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

 

Published Thursday, September 21, 2006 1:06 PM by ScottGu

Comments

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 4:33 PM by Richard
Much as I like reading about all this new and cool Ajax stuff, could you please devote a quick post to letting us know when we can expect Visual Studio 2005 service pack 1 please. It's supposed to be out in the 3rd quarter, so you ain't got much time if you're going to hit that mark. VS2005 desperately needs fixing and there's very little information coming out of Microsoft. Please let us know......

# Mitch Milam&#8217;s Microsoft Discussions &raquo; Blog Archive &raquo; AJAX/Atlas UpdateProgress Control

PingBack from http://blogs.infinite-x.net/2006/09/21/ajaxatlas-updateprogress-control/

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 6:12 PM by jc
Thats good info, though when I tried to use an animated gif, the animation seems to stop while its doing the UpdatePanel refresh so it maybe animates 10% of the time when the animation icon is loaded. So I ended up just changing it back to "Loading..." text which is still cool

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 8:17 PM by Sunny
excellent links Scott.. Thanks heaps :)

# While your Waiting

Thursday, September 21, 2006 9:07 PM by Paul Mooney

Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations One of the cool new controls...

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 9:29 PM by Vikram
graet new Tool. Will add one of them in my site

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 21, 2006 10:57 PM by Steve
Great to see. However, I'm disapointed that this isn't a 'per panel' option. ie. several panels on a page - only one needing to show this control.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:16 AM by Michael Sync
Thanks. Scott. But Im still using ASP.NET 1.1. So, Which Ajax Framework would you suggest for ASP.NET? Ajax.NET or something else? I guess, it's would be great if Microsoft Atlas can be used in ASP.NET 1.1. Thanks.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 4:58 AM by Marshall Brooke
Hey Scott, The Atlas library looks better with every release. On the above point, I've noted that the UpdateProgress is not fired when you fire a PageMethods method. Is this by design? best Marshall

# AJAX Progress Bar

Friday, September 22, 2006 7:35 AM by Chris Love's Official Blog - Professional ASP.NET

Now this is what I am talking about, a great use of AJAX with a progress bar. I found it on ScottGu's blog. He even has some visuals on his site. The controls are part of the Atlas Toolkit. I seriously hope I have some weekend time to play with these

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 7:37 AM by Chris Love
Awsome! I think we have all wanted a good way to do this for many of our pages. I can not wait to start digging into Atlas over the next few weeks.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 10:04 AM by wahyu
Is that any way i can use multiple UpdateProgress on a webform? If we have 3 content panels which controlled by 3 different triggers, the updateprogress should be specific to the button or panel that trying to retrieve data from the server.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 10:35 AM by Jeff

You know, something that has been on my mind for awhile, is trying to figure out an effective way to put the update in a particular place. There are times when you have a big mess of different UI elements, and it doesn't make sense to have a progress indicator in one corner of the screen, or floating on top of everything.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 1:26 PM by Ryan
Scott, thanks for these links! Great resource.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:12 PM by Laura
Interesting. I can only get this to work with server side code (ie. works with with OnClick, but not OnClientClick). Have you found this to be true also?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:12 PM by ScottGu

Hi Richard,

Info on SP1 should be coming out shortly I believe.  We are working really hard on it.

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:13 PM by ScottGu

Hi Michael,

For ASP.NET 1.1 you might want to look at both AJAX.NET and Anthem.  I've heard very good things about both packages (they also work on ASP.NET 2.0 as well).

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:14 PM by ScottGu

Hi Steve,

I believe with the final release there will be an option to have UpdateProgress fire per-panel (so you can have different ones for different updatepanels).  This will also exist for UpdateAnimators as well.

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 22, 2006 3:22 PM by ScottGu

Hi Laura/Marshall,

I believe the UpdateProgress only fires automatically when you use an UpdatePanel notification.  If you call webmethods via JavaScript code, you want to manually kick off the notification and cancel it yourself (the reason being you'll have a better idea of when to start/stop it then we would).

Hope this helps,

Scott

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Saturday, September 23, 2006 5:58 AM by Majid Shahabfar
Scott, Last day I was searching the google to find such these indicators for my Atlas based project. thanks

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Saturday, September 23, 2006 8:55 PM by Daniel
Hi Scott, The new naming scheme is just a joke, right? :-) How about MAJAX Library, beats Microsoft ASP.NET AJAX Library. Regards, Daniel

# Link Listing - September 23, 2006

Saturday, September 23, 2006 11:35 PM by Christopher Steen
Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations [Via: ScottGu ] Vista RC1 Experiences...

# Mike Forgen

Sunday, September 24, 2006 10:40 AM by AJAX ASP.NET library that impressed me
For ASP.NET 1.x (and for ASP.NET 2.0 too), take better a look at Ajaxium component (or framework, don't really know how to call this new tool). A lot of its features are impossible with Atlas and other libraries -- smooth AJAX-ed navigation between different pages, downgrade to ASP.NET postbacks from AJAX for old browsers, accessibility to search spiders, etc. Mike

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Monday, September 25, 2006 9:50 PM by TEddy
The above product costs $2999!!! Atlas is FREE!!!!!!!!!! Sound like a punter. LOL :-)

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, September 28, 2006 6:38 PM by Mike Forgen
Are you joking? I've bought it. It costs only $349.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, September 29, 2006 10:34 AM by Leo
Scott, could you give me your opinion on this post that I've made, about Atlas? http://forums.asp.net/thread/1413916.aspx Thanks, Leo

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Friday, October 27, 2006 12:13 AM by Pete Baza
You cannot post this without touching on File Upload issues...not cool...

# 技巧和诀窍:UpdateProgress控件和AJAX活动图像动画

Friday, November 03, 2006 4:15 AM by scottgu

ASP.NET AJAX扩展(即Atlas) 提供的很酷的新控件之一是UpdateProgress控件。这个控件允许你在AJAX回调的进行过程中,自动在页面上显示指定的UI。

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Saturday, November 11, 2006 12:42 PM by Michael Love

In the release notes witn Ajax... it was not mentioned that the

 <buildProviders>

   <add extension=".gas" type="System.Web.Compilation.PageBuildProvider" />

 </buildProviders>

had to be inside the <compilation>

</compilation>

Tags... Can this be added to the notes for those of us that are learning this stuff for the first time...

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Wednesday, December 13, 2006 10:07 AM by Andrew Stopani

In IE 6 I have seen that some controls "show through" the UpdateProgress details that I am showing.  Is there a solution to this which will allow me to sit over the controls that I am dynamically adding to the page?

I have tried z-index's and iframes but to no avail.  Any assistance would be greatly appreciated.

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Monday, January 29, 2007 2:15 PM by Davide

did anyone try to use UploadPanel with Fileupload and UpdateProgress?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Tuesday, January 30, 2007 11:04 AM by Neal

Very cool! need to brush up on my css to get it position next to a button. anyone have any ideas?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Sunday, February 04, 2007 11:34 PM by koistya

Scott, is there a way to make FileUpload control work withing UpdatePanel (with AJAX)?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Tuesday, February 27, 2007 6:32 AM by amorano

Along the same vein as the above question. When are we going to get or easily be able to do TRUE progress bars, and not just animated gifs?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Thursday, March 15, 2007 10:24 PM by Philip Long

Hi Scott,

The Slider sample at http://ajax.asp.net/ajaxtoolkit/

works fine.

But I've trying to use the slider in my application, and it's failing because the control does not have an initial value (which I thought would be provided by the value of the "Bound Control" textbox).

So I've opened up the "SampleWebSite" solution, to check the code and run it from there. And guess what, that fails as well, for the same reason - the reason for failure can be seen in the javascript.

Any thoughts on this?

# re: Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Sunday, March 18, 2007 10:33 PM by Philip Long

Further to my comment March 15, found that the problem was my out-of-date ajaxcontroltoolkit.dll.

Now using version 1.0.10301.0

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

Thursday, May 17, 2007 1:18 AM by CodeClimber

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

# ASP.NET AJAX のプログレスバーアイコン

Tuesday, May 22, 2007 6:25 PM by かるあ のメモ

Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations (ScottGu's Blog)で、ASP.NET AJAX の UpdateProgress に使うといい感じなアイコンが紹介されていますね。

# BlogZaa &raquo; Blog Archive &raquo; How to make a Gmail-like loading indicator with ASP.NET Ajax

Pingback from  BlogZaa  &raquo; Blog Archive   &raquo; How to make a Gmail-like loading indicator with ASP.NET Ajax

# GIF Animate per AJAX UpdateProgress

Friday, May 25, 2007 10:12 AM by Around and About .NET World

# GIF Animate per AJAX UpdateProgress

Friday, May 25, 2007 10:24 AM by Around and About .NET World

# Youtteam - &raquo; Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

Pingback from  Youtteam  -   &raquo; Tip/Trick: UpdateProgress Control and AJAX Activity Image Animations

# Atlas &amp; AJAX progress Indicator images. - Ryan Ternier

Friday, October 05, 2007 4:17 PM by Atlas & AJAX progress Indicator images. - Ryan Ternier

Pingback from  Atlas &amp; AJAX progress Indicator images. - Ryan Ternier

# Can I use the UpdateProgress Control AND run JavaScript - ASP.NET Forums

Pingback from  Can I use the UpdateProgress Control AND run JavaScript - ASP.NET Forums

# ajax asp net floating update progress panel

Friday, June 13, 2008 7:53 PM by ajax asp net floating update progress panel

Pingback from  ajax asp net floating update progress panel

# de

Thursday, June 19, 2008 5:45 AM by DotNetKicks.com

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Thanks for sharing your feedback! If your feedback doesn't appear right away, please be patient as it may take a few minutes to publish - or longer if the blogger is moderating comments.