web-dev-qa-db-fra.com

Changer le curseur pour attendre en javascript/jquery

enter image description here

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 replacer en un curseur normal en javascript/jquery

javascriptjqueryhtml
90
ahmet

Dans votre utilisation de jQuery:

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

et puis retour à la normale

$("body").css("cursor", "default");
166
Robert Stanley

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. ajoutez un identifiant au corps et à la règle, ou utilisez !important.

60
hrabinowitz

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

7
tusar
$('#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 aboutisse.

6
Kanishka Panamaldeniya

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

Change le curseur en spinner: document.body.style.cursor = 'wait';

Revenir à l'état normal du curseur: document.body.style.cursor = 'default';

6
kchuang7

Remplacer tous les éléments simples

$("*").css("cursor", "progress");
6
สุดเขต นะจ๊ะ

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

6
ManseUK

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, c.-à-d. beforeunload

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

Voici quelque chose d'intéressant que vous pouvez faire. Définit 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');
  }
2
Shawn Vincent

Si cela sauve trop vite, 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");
1
Mark Eilenberger

J’ai trouvé que le seul moyen de faire en sorte que le curseur rétablisse son style par rapport au style d’attente était de définir le style original dans une feuille de style ou dans des balises de style au début de la page, la classe de l'objet en question au nom du style. Ensuite, après votre période d'attente, vous redéfinissez le style du curseur sur une chaîne vide, PAS "par défaut", qui rétablit sa valeur d'origine définie dans vos balises de style ou votre feuille de style. La définition de "default" après la période d'attente ne fait que changer le style du curseur pour chaque élément au style appelé "default" qui est un pointeur. Cela ne le ramène pas à sa valeur précédente.

Il y a deux conditions pour que cela fonctionne. Tout d'abord, vous devez 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 deuxièmement, réinitialiser son style en définissant le style d'attente à une chaîne vide.

0
Dogman

Si vous définissez le curseur sur 'body', le curseur sera modifié pour l’arrière-plan de la page, mais pas pour les commandes. Par exemple, les boutons auront toujours le curseur normal lors du survol. Voici ce que j'utilise:

Pour définir le curseur 'wait', créez un élément de style et insérez-le dans l'en-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 style:

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