Ladeanzeigen

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 10 von 27.

Ladeindikatoren sind kleine visuelle Elemente (wie Spinner oder Animationen), die den Benutzern mitteilen, dass im Hintergrund etwas passiert (beim Absenden eines Formulars oder beim Laden von Daten). Sie verbessern die Benutzererfahrung, indem sie Feedback geben, anstatt den Benutzer im Ungewissen zu lassen.

Fügen Sie zuerst dieses HTML zu Ihrer Seite hinzu:

<button id="loadBtn">Load Data</button>
<div id="loading-spinner" class="spinner-hidden">
  <div class="spinner"></div>
</div>

Fügen Sie anschließend CSS hinzu, um das Element so zu gestalten, dass es wie ein Rad aussieht, und verwenden Sie Keyframes, damit es sich endlos dreht. Wir verwenden außerdem eine .hidden-Klasse, um den Spinner bei Bedarf unsichtbar zu machen.

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.hidden {
  display: none;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Fügen Sie nun JavaScript hinzu, um den Spinner anzuzeigen/auszublenden:

const loadBtn = document.getElementById("loadBtn");
const spinner = document.getElementById("spinner");

loadBtn.addEventListener("click", function () {
  // Spinner anzeigen
  spinner.classList.remove("hidden");

  // Nach 3 Sekunden den Spinner ausblenden und einen Alert anzeigen
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Wenn der Button geklickt wird, zeigen wir den Spinner an, warten 3 Sekunden, blenden ihn dann aus und zeigen einen Alert an.

Aufgabe

Einfach

Deine Aufgabe:

Füge innerhalb des click-Event-Listeners der Schaltfläche Code hinzu, um den Spinner anzuzeigen, indem du die Klasse "hidden" entfernst. Platziere diesen Code vor der setTimeout-Funktion.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Loading Spinner Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to My Page</h1>
    <p>Click the button below to simulate loading data.</p>
    <button id="loadBtn">Load Data</button>
    <div id="spinner" class="spinner hidden"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>