Subtle and understandable indication of AJAX page fragment load in progress? (No gifs!)
I am working with a home-grown CMS and have recently "upgraded" the entire thing to use javascript/AJAX/XHR to handle every page load and form submit, no exceptions. So far so good.
All links load a page fragment into the "main" content area or sometimes a secondary area, which replaces the existing content.
I am looking for a subtle way to show the user that there is a request pending.
At first I did the typical thing: Put a big spinning circle into the content area while we wait for the new content to load. I hate this: it's clunky, tacky, ugly, and the fact that it takes over the content area before the content is ready really bugs me; it also means you can't cancel the loading by clicking another link inside the content area (because it was replaced with the animation). I can add "click to cancel" to the loading animation but still would like to avoid this technique.
One idea I had was to add a little fixed status bar on the bottom of the page, and display something similar to what you'd see in a browsers status bar (connecting, loading, done, etc.). I like this personally as a developer but I don't think my users will understand it or even notice it, plus it takes up space and probably needs to use written language to convey the status. I could use something like a "stop light" with red (connecting) green (ready) and yellow (loading), but I'm not very fond of this idea in general, just sharing what I had considered.
My other idea was adding and removing a css class to the link clicked while the related request was pending. So, if you click a link it will "light up" or something while the content is loading, and go back to normal after. I like this, because it leads to a lot less "action" going on visually as compared to #1.
What would be a good way to alter the look of the links using technique #3, so that it's obvious that there is loading in progress. I considered an animated background. I considered reducing the opacity of the link. For debug purposes I am just adding a red background or text color and it does do the job (makes it feel like something is going on), but of course it is terrible looking. I am also using the progress cursor type for the link which definitely helps.
Second, what are some other solutions to this that the user will clearly understand, without hijacking the content area with spinning circles, pulsating squares, and other tacky .gif solutions?