... in order to show the user that on the background of the web application is loading an animated gif like this:
A typical approach is: 1. show a rotating gif in a corner or somewhere in a prominent place 2. start the download (XHttpRequest and Co.) 3. When the download ends, remove the picture. ')
Idea
Use cursor animation to display application busyness.
Say, in jQuery, it’s enough to do this: $("*").css("cursor", "wait");
Return Cursors: $("*").css("cursor", "");
This snippet will change the state of the cursor over all elements. However, why not limit it to a specific object?
$(".__").css("cursor", "wait");
pros
* No change in markup structure * No external elements are involved (however, you can use your own * .cur files. A reliable source reports that this feature is supported by all modern browsers) * Very intuitive in itself
Minuses
* It looks as if the browser is frozen (but if you use a non-standard cursor, it is quite distinct) * Different axes look different (by the way, this is a minus and a plus)
PS: while I was looking for a preloader, I accidentally found a website: www.loadinfo.net . There you can generate yourself a beautiful preloader =)