HTML Title AJAX Loading Spinner Animation

This web programming example demonstrates how to use the HTML Title as an AJAX Loading indicator. And, because good enough is never good enough it also includes an optional text-based animation effect using some basic javascript programming ;-).

We recently explored approaches to animating a loading spinner to add some pizazz to an AJAX application. The "loading spinner" is a small animation which helps lets a user realize an operation requiring a (hopefully brief) wait time is in progress. For example if the user clicks a button that makes a server request in the background (such as in an AJAX scenario), the app should provide some visual feedback to the user indicating the request is in progress.

One avenue we fiddled with was changing the document title while the AJAX requests were in-flight. This example exposes the current title, loading message, and a character used as an animation. You can tweak the combination to find the most appealing combination. You can also set the speed of the timing loop, using milliseconds.

Try it out: Click "Start" to begin the animation, and "Stop" when you are done. While it's running, look at the title at the top of the browser window. If you are using tabbed browsing--the scenario where I think this is most useful, click "run 5 seconds" and try switching tabs while this is running in the background. You'll notice that after 5 seconds, the "loading" title changes back to the original title--simulating that the request has completed.

If you want to use this approach in your own project, the source code behind the example appears below. Make the start and stop function calls from within your AJAX callbacks.

Best wishes!

(Debugging Console)
    
Title
Loading Message
Character Animation
Interval (milliseconds)
Ending Pause (ex. 0-30)

Title Spinner Example Code