📜 ⬆️ ⬇️

AJAX loading. Wait…


Usually


... in order to show the user that on the background of the web application is loading an animated gif like this:

image

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 =)

Edit:
For example, on a similar thing, it would look very appropriate:
www.extjs.com/deploy/dev/examples/desktop/desktop.html

Edit2:
This cursor, in fact, is even better suited than the "wait":
$("*").css("cursor", "progress");

Source: https://habr.com/ru/post/81994/


All Articles