How to make an Ajax loader follow mouse?

Question

I want to have something on my site that follows the mouse around, sort of like how Windows 7 does it.

Like in Windows 7 when something is loading up a little circle comes and follows the mouse.

I am using the jQuery library so I know I can use Ajax Start and Stop to make it appear but am not sure how to make it follow the mouse around.

Any plugins to do this or how to do this?

Answer 1

Do you mean mouse trails?

If so, you can do it via DHTML. Click Here for a good example with code.

Answer 2

That question was already answered here: http://stackoverflow.com/questions/1279254/jquery-tooltip-follow-mouse

However, that solution may slow down users' browsers due to the amount of calculations made during that proccess. I'd recommend you to change the browser's cursor using this trick in CSS:

cursor : url("custom.cur");

Answer 3

Just change the cursor instead to one of the standard OS "wait" cursors. http://www.quirksmode.org/css/cursor.html has a good grid of options and browser compatibilities. Hover over the cursor name in the grid to see an example in your browser.

It looks like you might want the progress cursor.

mystyle { cursor: progress; }

Answer 4

I figured I'd add a bit to this answer. My addition to the answer doesn't actually cover how to use JQuery to do this. Instead it covers how to use the ASP.NET Ajax Framework. This framework is automatically part of the page if your page (or MasterPage) has a ScriptManager on it. This framework is the one that's used by UpdatePanels and other Ajax Server controls in order to work.

The PageRequestManager Class manages partial-page updates (ajax requests). You can use this class to implement methods that should be executed whenever something to do with an ajax request occurs (like an ajax request begins or ends, or if an error has occurred while making the ajax request).

So, to implement this solution using the Ajax.NET framework instead of JQuery, grab a reference to the PageRequestManager and implement methods that will executed during the PageRequestManager's beginRequest and endRequest events to change the cursor style for the page:

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

It's pretty simple. When the page is making an Ajax request to the server the PageRequestManager's "beginRequest" event occurs and your method changes the cursor to a "wait" cursor (by default I think it's the circle thing in Vista but I'm not sure and can't test it because I'm working with XP right now).

When the Ajax request returns to the browser the PageRequestManager's endRequest event occurs and your method changes the cursor back to "default".

The only thing that the user will have to do in order to see this cursor change is move the mouse a bit (then the style's applied). At least I noticed this behaviour in FireFox when I tested the above code.

Happy coding

-Frinny