Индикаторы загрузки

Часть раздела JavaScript in Action путешествия по HTML на Coddy — урок 10 из 27.

Индикаторы загрузки — это небольшие визуальные элементы (такие как спиннеры или анимации), которые сообщают пользователям, что в фоновом режиме что-то происходит (при отправке формы или загрузке данных). Они улучшают пользовательский опыт, предоставляя обратную связь вместо того, чтобы заставлять пользователя гадать.

Сначала добавьте этот HTML-код на свою страницу:

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

Затем добавьте CSS, чтобы стилизовать элемент так, чтобы он выглядел как колесо, и используйте ключевые кадры (keyframes), чтобы он вращался бесконечно. Мы также используем класс .hidden, чтобы скрывать спиннер, когда это необходимо.

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

Теперь добавьте JavaScript, чтобы показать/скрыть спиннер:

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

loadBtn.addEventListener("click", function () {
  // Показать спиннер
  spinner.classList.remove("hidden");

  // Через 3 секунды скрыть спиннер и показать уведомление
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

При нажатии на кнопку мы показываем спиннер, ждем 3 секунды, затем скрываем его и выводим оповещение.

Задание

Легко

Ваша задача:

Внутри слушателя события клика кнопки добавьте код для отображения спиннера, удалив класс "hidden". Разместите этот код перед функцией setTimeout.

Попробуйте сами

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