Indicadores de carga

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 10 de 27.

Los indicadores de carga son pequeños elementos visuales (como spinners o animaciones) que permiten a los usuarios saber que algo está sucediendo en segundo plano (al enviar un formulario o cargar datos). Mejoran la experiencia del usuario al mostrar una respuesta en lugar de dejar al usuario con la duda.

Primero, agrega este HTML a tu página:

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

Después, añade CSS para dar estilo al elemento de modo que parezca una rueda, y usa fotogramas clave para mantenerlo girando indefinidamente. También usamos una clase .hidden para mantener el indicador invisible cuando sea necesario.

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

Ahora, añade JavaScript para mostrar/ocultar el indicador de carga:

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

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

  // Después de 3 segundos, ocultar spinner y mostrar alerta
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Cuando se hace clic en el botón, mostramos el indicador de carga, esperamos 3 segundos, después lo ocultamos y mostramos una alerta.

Desafío

Fácil

Tu tarea:

Dentro del detector de eventos de clic del botón, añade código para mostrar el indicador de carga eliminando la clase "hidden". Coloca este código antes de la función setTimeout.

Pruébalo tú mismo

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