Javascript Jquery

Erstellen eines drehenden Aktivitätsindikators in JavaScript mit jQuery

Wenn Benutzer mit Webanwendungen interagieren, erwarten sie oft sofortiges Feedback. Wenn eine Aufgabe Zeit in Anspruch nimmt, ist es wichtig, den Benutzern mitzuteilen, dass die Anwendung weiterhin arbeitet, um sie engagiert zu halten. Hier kommt ein drehender Aktivitätsindikator ins Spiel – eine einfache, aber effektive Möglichkeit, zu zeigen, dass eine lang andauernde Aufgabe in Bearbeitung ist.

Der Bedarf an einem Aktivitätsindikator

Stellen Sie sich vor, Sie verwenden eine Webanwendung und reichen ein Formular ein oder fordern einige Daten an. Während das System Ihre Anfrage bearbeitet, kann es einige Sekunden dauern. Benutzer könnten sich Sorgen machen, dass die App abgestürzt ist oder dass es keinen Fortschritt gibt. Ein visuelles Signal, wie ein drehender Kreis, kann diese Bedenken zerstreuen.

Was ist ein drehender Aktivitätsindikator?

Der drehende Aktivitätsindikator wird oft als Ajax-Aktivitätsindikator bezeichnet. Das bedeutet im Wesentlichen, dass er einen Hintergrundprozess oder einen Ajax-Aufruf anzeigt. Benutzer könnten auf diese in zahlreichen Anwendungen gestoßen sein, wie zum Beispiel:

  • Laden neuer Tabs in Webbrowsern wie Firefox
  • Startbildschirme in Betriebssystemen wie macOS
  • Verschiedene Webanwendungen, wenn sie auf Daten warten

So erstellen Sie einen drehenden Aktivitätsindikator

Schritt 1: Finden Sie Ihr Spinner-Bild

Der erste Schritt bei der Implementierung eines drehenden Indikators besteht darin, das tatsächliche Bild zu beschaffen. Sie können leicht zahlreiche animierte GIFs finden, die als Spinner gestaltet sind, indem Sie einfach bei Google nach “Ajax-Aktivitätsindikator” suchen.

Eine hervorragende Ressource für Spinner-Bilder ist AjaxLoad. Hier können Sie Ihr bevorzugtes Spinner-Design anpassen und herunterladen.

Schritt 2: Bereiten Sie Ihre HTML-Struktur vor

Fügen Sie das Spinner-Bild in Ihr HTML ein, wo Sie es anzeigen möchten. Zum Beispiel könnten Sie es in ein <div>-Element innerhalb einer Tabelle einfügen oder einfach als eigenständige Komponente anzeigen:

<div id="spinner" style="display: none;">
    <img src="path_to_your_spinner_image.gif" alt="Wird geladen..." />
</div>

Schritt 3: Verwenden Sie jQuery, um die Sichtbarkeit umzuschalten

Jetzt, wo Sie Ihr HTML eingerichtet haben, können Sie jQuery nutzen, um den Spinner anzuzeigen oder auszublenden, wenn eine Aufgabe initiiert oder abgeschlossen wird. Hier ist eine einfache Möglichkeit, dies zu tun:

$(document).ready(function() {
    $("#yourButton").click(function() {
        $("#spinner").show(); // Den Spinner anzeigen, wenn der Button geklickt wird
        
        // Simulieren einer lang andauernden Aufgabe mit setTimeout
        setTimeout(function() {
            $("#spinner").hide(); // Den Spinner ausblenden, nachdem die Aufgabe abgeschlossen ist
        }, 3000); // Dauer nach Bedarf anpassen
    });
});

Erklärung des Codes:

  • Spinner anzeigen: Wenn eine bestimmte Aktion ausgelöst wird (wie das Klicken auf einen Button), wird die Sichtbarkeit des Spinners auf sichtbar geändert.
  • Aufgabe simulieren: Zu Demonstrationszwecken simuliert eine setTimeout-Funktion eine lang andauernde Aufgabe. In der Praxis wäre dies der Ort, an dem Ihr Ajax-Aufruf erfolgt.
  • Spinner ausblenden: Sobald die Aufgabe abgeschlossen ist, wird der Spinner wieder ausgeblendet.

Fazit

Die Implementierung eines drehenden Aktivitätsindikators in Ihrer Webanwendung verbessert nicht nur das Benutzererlebnis, sondern vermittelt auch Vertrauen in den Prozess. Indem Sie die beschriebenen Schritte befolgen, können Sie ein ansprechendes visuelles Signal erstellen, während Sie sicherstellen, dass Ihre Benutzer informiert und beruhigt bleiben, dass Aufgaben in Bearbeitung sind.

Fühlen Sie sich frei, mit verschiedenen Spinner-Designs zu experimentieren und diese in Ihre Webprojekte zu integrieren. Viel Spaß beim Codieren!