加载指示器

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 10 课，共 27 课。

加载指示器是一些小型视觉元素（例如旋转图标或动画），能让用户知道后台正在处理某些事情（例如提交表单或加载数据）。它们通过提供反馈来改善用户体验，而不是让用户猜测。

首先，将此 HTML 添加到你的页面中：

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

接着，添加 CSS 来设置元素的样式，让它看起来像一个轮子，并使用关键帧让它不停旋转。我们还使用 .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>