Indicadores de carregamento

Parte da seção JavaScript em Ação 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 de modo que ele pareça uma roda e use quadros-chave 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/ocultar o indicador de carregamento:

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

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

  // Após 3 segundos, ocultar 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, esperamos 3 segundos, depois o ocultamos e exibimos um alerta.

Desafio

Fácil

Sua tarefa:

Dentro do listener de evento de clique do botão, adicione código para exibir o spinner removendo a classe "hidden". Coloque esse 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>