"Please wait ...", "Loading", "Saving", "Generating" Implementations

Question

In the browsers using HTML, Ajax, or YUI (JavaScript in general) what are successful and preferential implementations of the 'please wait we are working on your request'?

Additional context is that the Web Application I work on has a few requests that can require significant IO/CPU time (10 - 30 seconds) and has the need to communicate to the user that we got your request and we are working on it.

Edit: Another aspect is have you seen a site's implementation that impresses you? An example you like

Answer 1

Make the indicator: obvious, prominent, and appear either always in the same place or by the control that was clicked to initiate the action. Depending on the audience of your application, nowadays the ubiquitous "loading circle" does the trick, but it doesn't hurt to add a "Loading..." next to it.

Answer 2

For something that takes that long, you should use progress bar or similar. For example:

• jQuery http://jqueryui.com/demos/progressbar/
• Dōjō http://dojocampus.org/explorer/#Dijit_Progress%20Bar_Typing%20Monitor
• YUI http://developer.yahoo.com/yui/examples/container/panel-loading.html

Answer 3

If it's going to take 20 or 30 seconds, don't block me up. Let me continue working on other stuff and let me know when it's done.

Answer 4

Check http://www.ajaxload.info/ :-)

Answer 5

vartec provided the canonical YUI example. An excellent Spanish developer named Satyam also has a YUI implementation that's of interest if you can provide progress feedback during the time you're asking the user to wait:

http://satyam.com.ar/yui/2.5.0/progressbar/index.html

Satyam's Progress Bar is available for YUI 2.x and YUI 3.x and is expected to become part of the official YUI library in a subsequent release.

-Eric

Answer 6

In general, you would place there a blocking overlay with a spinning wheel/throbber as a busy indicator. Dojo offers some tools off-the-shelf: Busy Button and more general Standby.