Changer le curseur en attente dans javascript / jquery

Comment puis-je faire changer mon curseur en cette icône de chargement lorsqu'une fonction est appelée et comment le changer en un curseur normal dans javascript / jquery

Dans votre utilisation jQuery:

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

puis de nouveau à la normale

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

Un collègue a suggéré une approche que je trouve préférable à la solution choisie ici. Tout d'abord, en CSS, ajoutez cette règle:

body.waiting * {
    cursor: progress;
}

Ensuite, pour activer le curseur de progression, dites:

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

et pour désactiver le curseur de progression, dites:

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

L'avantage de cette approche est que lorsque vous désactivez le curseur de progression, tous les autres curseurs définis dans votre CSS seront restaurés. Si la règle CSS n'est pas suffisamment puissante pour remplacer les autres règles CSS, vous pouvez ajouter un identifiant au corps et à la règle, ou utiliser !important.

Veuillez ne pas utiliser jQuery pour cela en 2018! Il n'y a aucune raison d'inclure une bibliothèque externe entière juste pour effectuer cette action qui peut être réalisée avec une seule ligne:

Changer le curseur en double flèche: document.body.style.cursor = 'wait';

Ramener le curseur à la normale: document.body.style.cursor = 'default';

Ce qui suit est ma méthode préférée, et changera le curseur chaque fois qu'une page est sur le point de changer ie beforeunload

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

Utilisation de jquery et css:

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

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

CSS: .wait {cursor:wait}​

Démo ici

Remplacer tous les éléments uniques

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

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

Cela créera un curseur de chargement jusqu'à ce que votre appel ajax réussisse.

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

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

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

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

Vous n'avez pas besoin de JavaScript pour cela. Vous pouvez changer le curseur en tout ce que vous voulez en utilisant CSS:

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

Voir ici pour la prise en charge du navigateur car il existe des différences subtiles selon le navigateur

Voici quelque chose d'intéressant que vous pouvez faire. Définissez une fonction à appeler juste avant chaque appel ajax. Attribuez également une fonction à appeler après la fin de chaque appel ajax. La première fonction définira le curseur d'attente et la seconde l'effacera. Ils ressemblent à ceci:

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

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

S'il enregistre trop rapidement, essayez ceci:

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

Le réglage du curseur pour «corps» changera le curseur pour l'arrière-plan de la page mais pas pour les contrôles sur celle-ci. Par exemple, les boutons auront toujours le curseur normal lorsqu'ils seront survolés. Voici ce que j'utilise:

Pour définir le curseur 'wait', créez un élément de style et insérez dans la tête:

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

Ensuite, pour restaurer le curseur, supprimez l'élément de style:

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

J'ai trouvé que le seul moyen pour que le curseur réinitialise efficacement son style à ce qu'il avait avant d'être changé en style d'attente était de définir le style d'origine dans une feuille de style ou dans des balises de style au début de la page, définissez la classe de l'objet en question au nom du style. Ensuite, après votre période d'attente, vous définissez le style du curseur sur une chaîne vide, PAS "par défaut" et il revient à sa valeur d'origine telle que définie dans vos balises de style ou feuille de style. Le paramétrer sur "par défaut" après la période d'attente ne change que le style du curseur pour chaque élément par le style appelé "par défaut" qui est un pointeur. Cela ne le ramène pas à sa valeur d'origine.

Il y a deux conditions pour que cela fonctionne. Vous devez d'abord définir le style dans une feuille de style ou dans l'en-tête de la page avec des balises de style, PAS en tant que style en ligne et en second lieu, réinitialiser son style en redéfinissant le style d'attente sur une chaîne vide.