Chỉ báo tải

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 10 trên 27.

Chỉ báo tải là những yếu tố trực quan nhỏ (như biểu tượng xoay hoặc hoạt ảnh) giúp người dùng biết có việc đang diễn ra ở chế độ nền (khi gửi biểu mẫu hoặc tải dữ liệu). Chúng cải thiện trải nghiệm người dùng bằng cách hiển thị phản hồi thay vì để người dùng phải đoán.

Trước tiên, hãy thêm HTML này vào trang của bạn:

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

Sau đó, thêm CSS để tạo kiểu cho phần tử như một bánh xe, rồi dùng keyframes để bánh xe quay liên tục. Ta cũng dùng lớp .hidden để ẩn vòng xoay khi cần.

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

Bây giờ, thêm JavaScript để hiển thị/ẩn vòng xoay tải:

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

loadBtn.addEventListener("click", function () {
  // Hiển thị spinner
  spinner.classList.remove("hidden");

  // Sau 3 giây, ẩn spinner và hiển thị thông báo
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Khi bạn nhấp vào nút, biểu tượng tải sẽ hiện ra. Chờ 3 giây, rồi ẩn biểu tượng đó và hiển thị hộp thoại cảnh báo.

Thử thách

Dễ

Nhiệm vụ của bạn:

Bên trong trình lắng nghe sự kiện nhấp vào nút, hãy thêm code để hiển thị vòng xoay bằng cách xóa lớp "hidden". Đặt đoạn code này trước hàm setTimeout.

Tự làm thử

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