Cambiare il cursore in attesa in javascript / jquery

Come faccio a far cambiare il mio cursore a questa icona di caricamento quando viene chiamata una funzione e come dovrei cambiarlo di nuovo in un normale cursore in javascript / jquery

Nel tuo jQuery usa:

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

e poi di nuovo alla normalità

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

Un collega ha suggerito un approccio che trovo preferibile alla soluzione scelta qui. Innanzitutto, in CSS, aggiungi questa regola:

body.waiting * {
    cursor: progress;
}

Quindi, per attivare il cursore di avanzamento, dì:

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

e per disattivare il cursore di avanzamento, pronuncia:

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

Il vantaggio di questo approccio è che quando si spegne il cursore di avanzamento, tutti gli altri cursori possono essere stati definiti nel CSS verranno ripristinati. Se la regola CSS non è abbastanza potente in precedenza da sovrascrivere altre regole CSS, è possibile aggiungere un id al corpo e alla regola oppure utilizzare !important.

Per favore non usare jQuery per questo nel 2018! Non c'è motivo di includere un'intera libreria esterna solo per eseguire questa azione che può essere ottenuta con una riga:

Cambia cursore in spinner: document.body.style.cursor = 'wait';

Riporta il cursore alla normalità: document.body.style.cursor = 'default';

Quello che segue è il mio modo preferito e cambierà il cursore ogni volta che una pagina sta per cambiare, es beforeunload

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

Utilizzando jquery e css:

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

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

CSS: .wait {cursor:wait}​

Demo qui

Sostituisci tutti i singoli elementi

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

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

Questo creerà un cursore di caricamento fino a quando la chiamata ajax non avrà esito positivo.

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

di nuovo indietro
$("body").css("cursor", "default");

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

di nuovo indietro
document.body.style.cursor = 'default';

Non hai bisogno di JavaScript per questo. Puoi cambiare il cursore in qualsiasi cosa tu voglia usando CSS:

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

Vedi qui per il supporto del browser poiché ci sono alcune sottili differenze a seconda del browser

Ecco qualcos'altro di interessante che puoi fare. Definisci una funzione da chiamare subito prima di ogni chiamata ajax. Assegna anche una funzione da chiamare al termine di ogni chiamata ajax. La prima funzione imposterà il cursore di attesa e la seconda lo cancellerà. Hanno il seguente aspetto:

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

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

Se salva troppo velocemente, prova questo:

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

L'impostazione del cursore per "corpo" cambierà il cursore per lo sfondo della pagina ma non per i controlli su di essa. Ad esempio, i pulsanti avranno ancora il cursore normale quando ci si passa sopra. Quanto segue è quello che sto usando:

Per impostare il cursore di "attesa", crea un elemento di stile e inserisci nella testa:

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

Quindi per ripristinare il cursore, elimina l'elemento di stile:

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

Ho scoperto che l'unico modo per far sì che il cursore ripristinasse efficacemente il suo stile a quello che aveva prima di essere modificato nello stile di attesa era impostare lo stile originale in un foglio di stile o nei tag di stile all'inizio della pagina, imposta la classe dell'oggetto in questione al nome dello stile. Quindi, dopo il periodo di attesa, reimpostate lo stile del cursore su una stringa vuota, NON "predefinita" e ritorna al suo valore originale come impostato nei tag di stile o nel foglio di stile. Impostandolo su "default" dopo il periodo di attesa cambia solo lo stile del cursore per ogni elemento nello stile chiamato "default" che è un puntatore. Non lo riporta al suo valore precedente.

Ci sono due condizioni per far funzionare questo. Per prima cosa devi impostare lo stile in un foglio di stile o nell'intestazione della pagina con i tag di stile, NON come uno stile in linea e il secondo è reimpostare il suo stile impostando lo stile di attesa su una stringa vuota.