. . . . . . . . . . . . . . . . .
There was a time when computer displays only showed text. A programmer might print out a period for every 1000 records of a large database that updated. As the program runs, the user would see dots appear and those dots would absolutely show progress. If the program hangs, the dots stop showing up.
In graphical systems like Windows and OSX, the programmer might change the system mouse cursor to be one of a variety of static or moving symbols. The little hourglass is a classic. A user might still assume that the program is running although there may be no good way to know for sure. At least moving the mouse would then show if the entire system was hung or not.
A new style of “Working On It” indicator is the spinning snake. The image above is an animation and is quite distracting since you are sitting there waiting for something to happen. At least you are waiting if you use programs and devices that use a spinning snake or something similar.
Using the forever spinning snake in a web page is very easy. If the web page can be used while the AJAX request is pending then it should appear inside of the page element where results will show up. If the entire page is being changed then perhaps the entire page should be cleared of content and this should be displayed until the new content arrives.
Here is a quick test to see this in action. There is a div element and two buttons. It is all contained in a table to make it look good in this blog. One button starts a pretend background request and the other button finished that request and sticks some fake data in the div. I find this system of displaying progress much more appealing than using words like “Working…” in the div. It’s even a bit more accurate than changing the system cursor to a waiting cursor, although I do that in some native Windows programs if it is more reflective of what is happening.
The code is all inline in this blog page so feel free to take it if this is the first time you are trying to accomplish this task.