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

 

27 Comments

  • 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......

  • 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

  • excellent links Scott..

    Thanks heaps :)

  • 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.

  • 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

  • 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.

  • 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.

  • 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.

  • Scott, thanks for these links! Great resource.

  • 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?

  • Hi Richard,

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

    Hope this helps,

    Scott

  • 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

  • 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

  • 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

  • Scott,
    Last day I was searching the google to find such these indicators for my Atlas based project.

    thanks

  • Hi Scott,
    The new naming scheme is just a joke, right? :-)

    How about MAJAX Library, beats Microsoft ASP.NET AJAX Library.

    Regards,
    Daniel

  • 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

  • The above product costs $2999!!! Atlas is FREE!!!!!!!!!!

    Sound like a punter. LOL
    :-)

  • Are you joking? I've bought it. It costs only $349.

  • You cannot post this without touching on File Upload issues...not cool...

  • In the release notes witn Ajax... it was not mentioned that the
    &nbsp;&lt;buildProviders&gt;
    &nbsp; &nbsp;&lt;add extension=&quot;.gas&quot; type=&quot;System.Web.Compilation.PageBuildProvider&quot; /&gt;
    &nbsp;&lt;/buildProviders&gt;
    had to be inside the &lt;compilation&gt;
    &lt;/compilation&gt;
    Tags... Can this be added to the notes for those of us that are learning this stuff for the first time...

  • 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.

  • did anyone try to use UploadPanel with Fileupload and UpdateProgress?

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

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

  • 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?

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

    Now using version 1.0.10301.0

Comments have been disabled for this content.