Changing cursor to waiting in javascript jquery

Question

How would i get my cursor to change to this loading icon when a function is called and how would i change it back to a normal cursor in javascript jquery

User · Answer

Setting the cursor for  body  will change the cursor for the background of the page but not for controls on it  For example  buttons will still have the regular cursor when hovering over them  The following is what I am using   To set the  wait  cursor  create a style element and insert in the head   var css        cursor  wait   important    var style   document createElement  style    style type    text css   style id    mywaitcursorstyle   style appendChild document createTextNode css    document head appendChild style     Then to restore the cursor  delete the style element   var style   document getElementById  mywaitcursorstyle    if  style      style parentNode removeChild style

User · Answer

I found that the only way to get the cursor to effectively reset its style back to what it had prior to being changed to the wait style was to set the original style in a style sheet or in style tags at the start of the page  set the class of the object in question to the name of the style   Then after your wait period  you set the cursor style back to an empty string  NOT  default  and it reverts back to its original value as set in your style tags or style sheet   Setting it to  default  after the wait period only changes the cursor style for every element to the style called  default  which is a pointer  It doesn t change it back to its former value   There are two conditions to make this work   First you must set the style in a style sheet or in the header of the page with style tags  NOT as an inline style and second is to reset its style by setting the wait style back to an empty string

User · Answer

If it saves too fast  try this    lt style media  screen  type  text css  gt       autosave  display  inline  padding  0 10px  color green  font-weight  400  font-style  italic    lt  style gt    lt input type  button  value  Save  onclick  save       gt  amp nbsp   lt span class  autosave  style  display  none   gt Saved Successfully lt  span gt       span autosave   fadeIn  80       span autosave   delay  400       span autosave   fadeOut  80

User · Answer

A colleague suggested an approach that I find preferable to the chosen solution here   First  in CSS  add this rule   body waiting         cursor  progress      Then  to turn on the progress cursor  say      body   addClass  waiting      and to turn off the progress cursor  say      body   removeClass  waiting      The advantage of this approach is that when you turn off the progress cursor  whatever other cursors may have been defined in your CSS will be restored  If the CSS rule is not powerful enough in precedence to overrule other CSS rules  you can add an id to the body and to the rule  or use  important

User · Answer

some id   click function          body   css  cursor    progress        ajax       url   test html       context  document body      success  function              body   css  cursor    default                      This will create a loading cursor till your ajax call succeeds

User · Answer

Here is something else interesting you can do   Define a function to call just before each ajax call   Also assign a function to call after each ajax call is complete   The first function will set the wait cursor and the second will clear it   They look like the following     document  ajaxComplete function event  request  settings               css  cursor    default           function waitCursor                css  cursor    progress

User · Answer

The following is my preferred way  and will change the cursor everytime a page is about to change i e  beforeunload    window  on  beforeunload   function              css  cursor    progress

User · Answer

Using jquery and css        element   click function           this  addClass  wait           HTML   lt div id  element  gt Click and wait lt  div gt    CSS      wait  cursor wait    Demo here

User · Answer

Override all single element         css  cursor    progress

User · Answer

In your jQuery use      body   css  cursor    progress      and then back to normal again     body   css  cursor    default

User · Answer

You don t need JavaScript for this  You can change the cursor to anything you want using CSS    selector       cursor  url myimage jpg   auto      See here for browser support as there are some subtle differences depending on browser

User · Answer

Please don t use jQuery for this in 2018  There is no reason to include an entire external library just to perform this one action which can be achieved with one line   Change cursor to spinner  document body style cursor    wait    Revert cursor to normal  document body style cursor    default

User · Answer

jQuery     body   css  cursor    progress     back again    body   css  cursor    default     Pure  document body style cursor    progress    back again document body style cursor    default

[javascript] Changing cursor to waiting in javascript/jquery

Examples related to javascript

Examples related to jquery

Examples related to html