Den Cursor in JavaScript/jQuery auf Wartend ändern

Wie kann ich meinen Cursor dazu bringen, sich in dieses Lade-Symbol zu ändern, wenn eine Funktion aufgerufen wird, und wie kann ich ihn in JavaScript/jQuery wieder in einen normalen Cursor zurückverwandeln?

Antwort #1

In Ihrem jQuery verwenden:

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

und dann wieder normal

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

Antwort #2

Ein Kollege schlug einen Ansatz vor, den ich der hier gewählten Lösung vorziehe. Zuerst fügen Sie in CSS diese Regel hinzu:

body.waiting * {
    cursor: progress;
}

Um den Fortschrittszeiger einzuschalten, sagen Sie:

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

und um den Fortschrittszeiger auszuschalten, sagen Sie:

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

Der Vorteil dieses Ansatzes besteht darin, dass, wenn Sie den Fortschritts-Cursor ausschalten, alle anderen Cursor, die in Ihrem CSS definiert sein könnten, wiederhergestellt werden. Wenn die CSS-Regel nicht stark genug ist, um andere CSS-Regeln zu überschreiben, können Sie der body ein id hinzufügen und der Regel, oder !important verwenden.

Antwort #3

Bitte verwenden Sie dafür im Jahr 2021 kein jQuery! Es gibt keinen Grund, eine gesamte externe Bibliothek nur für diese eine Aktion einzubinden, die mit einer einzigen Zeile erreicht werden kann:

Ändere den Cursor zu Spinner: document.body.style.cursor='wait'

Cursor auf normal zurücksetzen: document.body.style.cursor='default'

Antwort #4

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

wieder zurück
$ ("body").css("cursor", "default");

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

wieder zurück
document.body.style.cursor='default';

Antwort #5

Folgendes ist meine bevorzugte Methode und wird den Cursor jedes Mal ändern, wenn eine Seite zu wechseln beginnt, d.h. beforeunload