Indicateurs de chargement

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 10 sur 27.

Les indicateurs de chargement sont de petits éléments visuels (comme des icônes de chargement ou des animations) qui informent les utilisateurs que quelque chose se passe en arrière-plan (lors de la soumission d'un formulaire ou du chargement de données). Ils améliorent l'expérience utilisateur en affichant un retour d'information au lieu de laisser l'utilisateur dans l'incertitude.

Tout d'abord, ajoutez ce code HTML à votre page :

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

Ensuite, ajoutez du CSS pour styliser l'élément afin qu'il ressemble à une roue, et utilisez des keyframes pour le faire tourner indéfiniment. Nous utilisons également une classe .hidden pour garder le spinner invisible si nécessaire.

.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); }
}

Maintenant, ajoutez du JavaScript pour afficher/masquer le spinner :

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

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

  // Après 3 secondes, masquer le spinner et afficher une alerte
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Lorsque le bouton est cliqué, nous affichons le spinner, attendons 3 secondes, puis nous le cachons et affichons une alerte.

Défi

Facile

Votre tâche :

À l'intérieur de l'écouteur d'événement clic du bouton, ajoutez du code pour afficher le spinner en supprimant la classe "hidden". Placez ce code avant la fonction setTimeout.

Essayez vous-même

<!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>