Monday, July 10th, 2006

Ajax Activity Indicators Examples

Category: Component, Examples, Prototype

Ian Selby has written a thorough article on ajax activity indicators – make them globel and unobtrusive.

Ian details his solution:

So, what can we do about these problems? Well, if you’re using prototype as a part of your framework, you can register global indicator functions. These get executed when there are active requests, and when the requests complete. However, there’s another dilemma with this method too: Where do you place a indicator that can potentially appear often and keep it from being obtrusive, or, even worse, not being seen as it’s placed outside of the content that’s currently in view? I had to tackle that issue this week while starting development on a new project at work. I wanted to create an indicator that would be in the same place on every page, and that I never had to write extra code to use.

Check out the demo:

Ajax Indicator Demo

Code Example

javascript

  1. Ajax.Responders.register({
  2.     onCreate: function() {
  3.         if($('notification') && Ajax.activeRequestCount > 0)
  4.             Effect.Appear('notification',{duration: 0.25, queue: 'end'});
  5.     },
  6.     onComplete: function() {
  7.         if($('notification') && Ajax.activeRequestCount == 0)
  8.             Effect.Fade('notification',{duration: 0.25, queue: 'end'});
  9.     }
  10. });

Posted by Dion Almaer at 10:50 am
24 Comments

+++--
3.9 rating from 171 votes

24 Comments »

Comments feed TrackBack URI

IMHO, dedicating a portion of the screen to an actiivity indicator just doesn’t seem right. I like the idea & code, but the implemention shown here seems awkward.

Comment by Michael — July 10, 2006

great idea!

i did one web site using a custom activity indicator and then cannot use it cleanly on two other projects. this would have solved the problem and saved a lot of coding time :-)

Comment by Nick Pang | AuctionCloud — July 10, 2006

michael,

this is the analogy to the browser status bar :-)

-nick

Comment by Nick Pang | AuctionCloud — July 10, 2006

It’s broken on FF 1.5 and creates a frameset effect in IE 6 that doesn’t go away when the indicator leaves. Not very efficient.

Comment by David Olinsky — July 10, 2006

This is a useful idea. Thanks for the tip.

Comment by Daniel Lemire — July 10, 2006

I think the bigger issue with placing the activity indicator in a dedicated portion of the screen is that the activity location isn’t tied to the area being updated/processed, and that makes it more likely to be missed. For example, I have my monitor set at 1920×1200 and I had the browser maximized (don’t usually, but did at this time), so the activity indicator was something like 900+ pixels away from the item being clicked. Of course, that is an exterme example, but not tying the indicator location to (or near) the item(s) being updated, makes the intended benefit of the indicator pretty much disappear.

Comment by Danilo — July 10, 2006

I have mine following the mouse… it could get a little ugly when using iframes (still doable, though). Another idea is to set cursor: progress

Comment by Misha — July 10, 2006

The general idea is very cool, but relying on a portion of the screen that requires the notification element to make use of position:fixed (or any of its associated similar hacks) presents a number of x-browser issues. Fixable, admittedly, but still quite an annoyance.

Comment by kamens — July 10, 2006

Not working on Win2003… :(

Comment by Michael Schwarz — July 10, 2006

So we are going to revert to tried-and-failed UI tricks ?

This is analogus to the old Netscape and IE activity indicators in the upper right corner. Never worked as intended… just annoying.

Comment by Phillip Seamore — July 10, 2006

After much feedback, both on this site and mine, I feel that I failed to properly explain where this implementation would be useful. If you have a page with a single action, say a live search for example, separating the indicator from the action is poor form from a usability standpoint. However, a dashboard page with a couple widgets and some live updating data, or some other instance where a lot of ajax may be happening on a page at once would be a perfect use for what I write about. Thanks to everyone for their comments, feedback, and advice.

Comment by Ian Selby — July 10, 2006

[…] Having read about the article on Ajaxian, I was about to say that  I disagreed completely; using up screen real estate just for an activity indicator is a waste. However, I went and read the full article and the following update has been added: EDIT (7/10/2006): After much feedback, both on this site and ajaxian, I feel that I failed to properly explain where this implementation would be useful. If you have a page with a single action, say a live search for example, separating the indicator from the action is poor form from a usability standpoint. However, a dashboard page with a couple widgets and some live updating data, or some other instance where a lot of ajax may be happening on a page at once would be a perfect use for what I write about. Thanks to everyone for their comments, feedback, and advice. […]

Pingback by Web 2.0 Blog » Blog Archive » Ajax Activity Indicators — July 11, 2006

This is the same kind of approach seen on Gmail and such and as has been mentioned has its pros/cons.
I like the idea of giving the user a coherent visual so they always know whats going on but I think it should be used in conjunction with something like the YFT to highlight to the user exactly what has changed.

Comment by Aaron Bassett — July 11, 2006

Prototype Makes Javascript Painless

Prototype is an excellent tool but lacking in documentation, causing me to fumble around and *gasp* look at the source code.

Trackback by YanHua — July 11, 2006

The comparison to gmail which Aaron points to is a good one I think. In gmail you’ll often repeat several actions. For each you’ll see the indicator running in the top right corner. Unobtrusive, but enough to check what’s going on. For example if sending a mail takes long you will see the activity going on. In the meantime you can keep doing other stuff.

So in a case like this you wouldn’t want an activity indicator getting in the way of what you are doing after the first action. That was the whole reason for AJAX wasn’t it? Otherwise we could just as well use a normal page refresh.

Comment by Matthijs — July 11, 2006

Seems to be using scriptaculous and prototype. I never seen so many complaints about not working for this or that browser… could this really be a case of that many user errors or is something horribly wrong in the code???

Comment by Mario — July 11, 2006

Seems to be using scriptaculous and prototype. I never seen so many complaints about not working for this or that browser… could this really be a case of that many user errors or is something horribly wrong in the code???

Mario, the browser errors people are encountering are mostly user-specific, and some other the other comments are addressed in the sitepoint article that I reference in mine. It addresses the need for certain things in order to get the notification area to stick to the bottom of the window in IE. In most cases, a simple change to the css could address some issues, but could result in the notification being positioned off the screen. I would encourage everyone to read the sitepoint article to get a better explanation of the how/why some of the things are done to stick the notification area to the bottom of the screen.

Comment by Ian Selby — July 11, 2006

Isn’t this also called a ‘throbber’ ?

Comment by Alexei — July 11, 2006

[…] JSON.NETuniAjax: an ajax framework focused on browser supportAtlas June CTPRelay: Ajax File ManagerDojo Available in Ning ApplicationsTuesday Morning RoundupWeb API authentication for mashupsExplaining AJAXEcho2 Widget PanelSlightly ThickerBoxJson.NET: Library to help with .NET – JS communicationIntelliJ IDEA Google Web Toolkit SupportPrivate and Public Members in JavaScriptSafari gets a Javascript debuggerInterview with ZK Creator Tom YehGo forth and APIMODx CMS – An Ajax/PHP Content SystemOPML IconPayPerPost: Right or Wrong?Google CheckoutJavaRef: Ajaxified JavaDocSpeeding up Prototype’s $$ SelectorLondon Tube Route Finder Ajax Activity Indicators – Make them Global and Unobtrusive One of the coolest things about developing ajax-enabled applications and sites is the level of interactivity that you can bring to your users. And perhaps one of the most crucial aspects of this process is adding activity indicators to your site. While a lot of ajax requests can be very fast, it’s still important to let your users know that something is happening. All too often I see people forgetting to add these indicators, purposefully omitting them because there wasn’t a good place to include them in the design, or implementing them poorly. One of the biggest omissions that I see is with live searches and auto-completion widgets, but not without good reason. Activity indicators can break up a good layout, as they can require a fair amount of page real estate. They’re also a major pain to incorporate into your apps, as you often end up writing a lot of redundant code to display and hide different indicators on different pages or parts of a page. Having read about the article on Ajaxian, I was about to say that I disagreed completely; using up screen real estate just for an activity indicator is a waste. However, I went and read the full article and the following update has been added: EDIT (7/10/2006): After much feedback, both on this site and ajaxian, I feel that I failed to properly explain where this implementation would be useful. If you have a page with a single action, say a live search for example, separating the indicator from the action is poor form from a usability standpoint. However, a dashboard page with a couple widgets and some live updating data, or some other instance where a lot of ajax may be happening on a page at once would be a perfect use for what I write about. Thanks to everyone for their comments, feedback, and advice. This makes a lot more sense :-) July 11th, 2006 […]

Pingback by Ajax Activity Indicators > Archives > Web 2.0 Stores — July 11, 2006

I’m looking to integrate this with a website I am using for a photographer. What I want to do is is the “loading” indicator after the user clicks on the thumbnail and the larger image is being loaded.

Currently I am using the standard OnClick event to change the src of a placeholder image. I would like to figure out how to work the “change” into this example.

Thanks!

Comment by Jaysturn — July 11, 2006

I still like the in-place notification best. This is a good pitch tho but as mentioned above you will have trouble x-browser wise. I would extend this method to target the source of action (form or whatever) and append a img element + loading text wherever necessary

Comment by Kjell Bublitz — July 14, 2006

Thanks!

Comment by Ignacio — September 4, 2006

maybe this is useful for ajax coders.
Make your own Ajax loading indicators with www. webscriptlab.com

Comment by nicolas — June 2, 2007

Cool stuff! But I still prefer a plain text one. :)

Comment by bizroof — February 14, 2008

Leave a comment

You must be logged in to post a comment.