Ladeanzeigen

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

Ladeanzeigen sind kleine visuelle Elemente (wie Spinner oder Animationen), die Benutzer darüber informieren, 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üge dann CSS hinzu, um das Element so zu gestalten, dass es wie ein Rad aussieht, und verwende Keyframes, damit es sich endlos weiterdreht. Wir verwenden außerdem eine .hidden-Klasse, um den Spinner bei Bedarf unsichtbar zu halten.

.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üge nun JavaScript hinzu, um den Spinner ein-/auszublenden:

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

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

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

Wenn auf die Schaltfläche geklickt wird, zeigen wir den Spinner an, warten 3 Sekunden, blenden ihn dann aus und zeigen eine Warnmeldung 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>