Changer le curseur pour attendre en javascript / jquery

Question

Comment pourrais-je obtenir que mon curseur se change en cette icône de chargement lorsqu'une fonction est appelée et comment pourrais-je le changer pour revenir à un curseur normal en javascript / jquery

Answer 1

Dans votre utilisation de jQuery:

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

et puis retour à la normale

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

Answer 2

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

body:waiting * {
    cursor: progress;
}

Puis, à son tour, sur les progrès curseur, dire:

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

et pour éteindre le progrès curseur, dire:

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

L'avantage de cette approche est que lorsque vous éteignez le progrès curseur, quelles que soient les autres curseurs peuvent avoir été définis dans votre css sera restauré. Si la règle css n'est pas assez puissant dans l'ordre de priorité à passer outre à d'autres règles css, vous pouvez ajouter un id au corps et à la règle.

Answer 3

En utilisant jquery et css:

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

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

CSS: .wait {cursor:wait}​

Démo ici

Answer 4

Ignorer tous les éléments simples

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

Answer 5

Vous n'avez pas besoin de JavaScript pour cela. Vous pouvez changer le curseur pour 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 quelques différences subtiles selon le navigateur.