Cambiar el cursor a esperar en javascript / jquery

¿Cómo puedo hacer que mi cursor cambie a este ícono de carga cuando se llama a una función y cómo lo volvería a cambiar a un cursor normal en javascript / jquery?

En su uso de jQuery:

$("body").css("cursor", "progress");

y luego de nuevo a la normalidad

$("body").css("cursor", "default");

Un colega sugirió un enfoque que considero preferible a la solución elegida aquí. Primero, en CSS, agregue esta regla:

body.waiting * {
    cursor: progress;
}

Luego, para activar el cursor de progreso, diga:

$('body').addClass('waiting');

y para apagar el cursor de progreso, diga:

$('body').removeClass('waiting');

La ventaja de este enfoque es que cuando apaga el cursor de progreso, se restaurarán los otros cursores que se hayan definido en su CSS. Si la regla CSS no es lo suficientemente poderosa en precedencia para anular otras reglas CSS, puede agregar una identificación al cuerpo y a la regla, o usar !important.

¡No use jQuery para esto en 2018! No hay ninguna razón para incluir una biblioteca externa completa solo para realizar esta acción que se puede lograr con una línea:

Cambiar el cursor a ruleta: document.body.style.cursor = 'wait';

Revertir el cursor a la normalidad: document.body.style.cursor = 'default';

La siguiente es mi forma preferida, y cambiará el cursor cada vez que una página esté a punto de cambiar, es decir beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

Usando jquery y css:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML: <div id="element">Click and wait</div>​

CSS: .wait {cursor:wait}​

Demo aquí

Anular todos los elementos individuales

$("*").css("cursor", "progress");

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

Esto creará un cursor de carga hasta que su llamada ajax tenga éxito.

jQuery:
$("body").css("cursor", "progress");

de nuevo
$("body").css("cursor", "default");

Puro:
document.body.style.cursor = 'progress';

de nuevo
document.body.style.cursor = 'default';

No necesita JavaScript para esto. Puedes cambiar el cursor a lo que quieras usando CSS:

selector {
    cursor: url(myimage.jpg), auto;
}

Consulte aquí la compatibilidad con el navegador, ya que existen algunas diferencias sutiles según el navegador.

Aquí hay algo más interesante que puedes hacer. Defina una función para llamar justo antes de cada llamada ajax. También asigne una función para llamar después de que se complete cada llamada ajax. La primera función establecerá el cursor de espera y la segunda lo borrará. Tienen el siguiente aspecto:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

Si guarda demasiado rápido, intente esto:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

Establecer el cursor para 'cuerpo' cambiará el cursor para el fondo de la página pero no para los controles en ella. Por ejemplo, los botones seguirán teniendo el cursor normal al pasar el cursor sobre ellos. Lo siguiente es lo que estoy usando:

Para configurar el cursor de 'espera', cree un elemento de estilo e insértelo en el encabezado:

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

Luego, para restaurar el cursor, elimine el elemento de estilo:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

Descubrí que la única forma de hacer que el cursor restableciera efectivamente su estilo a lo que tenía antes de ser cambiado al estilo de espera era establecer el estilo original en una hoja de estilo o en etiquetas de estilo al comienzo de la página, establecer la clase del objeto en cuestión al nombre del estilo. Luego, después de su período de espera, vuelve a establecer el estilo del cursor en una cadena vacía, NO "por defecto" y vuelve a su valor original como se estableció en sus etiquetas de estilo o hoja de estilo. Establecerlo en "predeterminado" después del período de espera solo cambia el estilo del cursor para cada elemento al estilo llamado "predeterminado", que es un puntero. No lo vuelve a cambiar a su valor anterior.

Hay dos condiciones para que esto funcione. Primero debe establecer el estilo en una hoja de estilo o en el encabezado de la página con etiquetas de estilo, NO como un estilo en línea y, en segundo lugar, restablecer su estilo estableciendo el estilo de espera de nuevo en una cadena vacía.