How to have AJAX trigger the browser's loading indicator

Question

I'm making an ajax-enabled lab scheduling program, and some of the ajax operations aren't exactly quick.

In Gmail, when you go to your inbox, send a message, etc. the browser acts like it's loading (In FF the stop button becomes enabled, the progress bar appears), but it's not on a new page, it's done via AJAX.

How do they do this? I have a little spinny indicator, but it would be a nice touch to have the browser act like it's loading. Any ideas?

Answer 1

I think this is your answer. (Reverse-AJAX or "Slow Load" technique from Obviously.com)

Looks like the GMail and Facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)

Answer 2

I found a related answer here: Browser continues 'loading' after ajax request finishes.

You can create an iframe and open and close its contentDocument which seems to start and stop the browser's native loading animation. See an example here: http://jsfiddle.net/KSXkS/1/.

Answer 3

Many users don't even understand or notice the browser's native loading indicators. If it is really a long running load the best user experience would be to indicate it as part of your web application. Remember context is king and this is an opportunity to communicate to your user what is going on and what functionality is still available.

If your entire user interface becomes invalid at the time of the request an overlay with a loading indicator is appropriate. A slightly opaque overlay communicates to the user without a disruptive break in vision.

If you simply need to show the request has started and is working, a spinner next to the button that started the request is best. On success, the spinner can be replaced with a green check mark or other common indicator that fades out after a short period.

These are common patterns found in many of google's applications.

Answer 4

This article has details about different types of requests and whether they trigger busy indicators like the progress bar.