0

I have what I feel like should be a very simple task.

During an AJAX call I need the mouse cursor to show loading.

No problem, a simple change like $(body).css("cursor", "progress") will get that done.

However, I read a comment on one of the pages I was researching, that suggested it might be better to use a custom loader, that way the user can easily differentiate between the OS telling them to wait, as opposed to my site telling them to wait.

That seemed to make sense to me, so I tried to use my own (animated) gif I quickly nabbed from here: http://ajaxload.info/

And I stored it in an Images folder on my site (the path has been checked for errors multiple times).

Here is where I had trouble. When I try to use url() in the .css jQuery call, it doesn't seem to find it.

I first used:

$("body").css("cursor", "url(/Images/Cursor_Loading/CustomLoader.gif)");

Then added some quotes:

$("body").css("cursor", "url('/Images/Cursor_Loading/CustomLoader.gif')");

But that didn't work either.

Next I took to trying to look up what I, again, was sure was just some simple syntax error on my part. I looked at the following sites, none of which helped me:

Custom cursor interaction point - CSS / JQuery

Setting background-image using jQuery CSS property

Changing cursor to waiting in javascript/jquery

I am sure this has to be easy, but now I am not sure if this is the better option or not, considering I read that there were some instances where this may not even work (like FireFox + a MAC devise, for instance).

Now, I'm not sure if I should even go this route, but if I should, I'm also not sure what the syntax expects from me...

Community
  • 1
  • 1
VoidKing
  • 6,282
  • 9
  • 49
  • 81
  • https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url – SLaks Oct 28 '13 at 16:20
  • @SLaks It says: `An animated PNG or GIF will not create an animated cursor.` :S Well, there's my answer. Thank you. P.S. Please make an answer, and I will accept. – VoidKing Oct 28 '13 at 16:21

1 Answers1

2

You can't do that.

ANI is not supported. An animated PNG or GIF will not create an animated cursor.

Also, you need to put a fallback keyword after the url.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964