Indicateurs de chargement

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 images clés pour le faire tourner indéfiniment. Nous utilisons également une classe .hidden pour garder le spinner invisible lorsque 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 l’indicateur de chargement :

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 l'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 le masquons et affichons une alerte.