How to make an Ajax bootloader follow the mouse?

I want to have something on my site that follows the mouse, similar to how Windows 7 does it.

As in Windows 7, when something loads, a small circle appears and follows the mouse.

I use the jQuery library, so I know that I can use Ajax Start and Stop to make it appear, but I'm not sure how to get it to follow the mouse.

Any plugins for this or how to do it?

+3
source share
5 answers

"wait". http://www.quirksmode.org/css/cursor.html . , .

, .

mystyle { cursor: progress; }
+6

: jQuery

- , . , CSS:

cursor : url("custom.cur");
+6

, . , JQuery . , ASP.NET Ajax Framework. , ( MasterPage) ScriptManager. , UpdatePanels Ajax Server .

PageRequestManager Class (ajax-). , , - ajax (, ajax ajax).

, Ajax.NET JQuery, PageRequestManager , beginRequest endRequest PageRequestManager, :

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(endRequestEventHandler);
    prm.add_beginRequest(beginRequestEventHandler);

    function beginRequestEventHandler() {
        var bodyElement = document.getElementsByTagName("body")[0];
        bodyElement.style.cursor = "wait";
    }
    function endRequestEventHandler() {
        var bodyElement = document.getElementsByTagName("body")[0];
        bodyElement.style.cursor = "default";
    }    
</script>

. Ajax , "Request" PageRequestManager, "" ( , Vista, " t , XP).

Ajax , endRequest PageRequestManager, "default".

, , , ( ). , FireFox, .

-Frinny

+1

, :

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS

html.busy, html.busy * {  
  cursor: wait !important;  
}  

: http://postpostmodern.com/instructional/global-ajax-cursor-change/

+1

?

, DHTML. .

0

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


All Articles