Indicadores de carregamento

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 10 de 27.

Indicadores de carregamento são pequenos elementos visuais (como spinners ou animações) que informam aos usuários que algo está acontecendo em segundo plano (ao enviar um formulário ou carregar dados). Eles melhoram a experiência do usuário ao fornecer feedback em vez de deixar o usuário na dúvida.

Primeiro, adicione este HTML à sua página:

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

Em seguida, adicione CSS para estilizar o elemento para que ele pareça uma roda e use keyframes para mantê-lo girando infinitamente. Também usamos uma classe .hidden para manter o spinner invisível quando necessário.

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

Agora, adicione JavaScript para mostrar/esconder o spinner:

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

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

  // Após 3 segundos, esconder o spinner e mostrar o alerta
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Quando o botão é clicado, mostramos o spinner, aguardamos 3 segundos, depois o ocultamos e exibimos um alerta.

Desafio

Fácil

Sua tarefa:

Dentro do ouvinte de evento click do botão, adicione o código para mostrar o spinner removendo a classe "hidden". Coloque este código antes da função setTimeout.

Experimente você mesmo

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