Indikator pemuatan

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 10 dari 27.

Indikator pemuatan adalah elemen visual kecil, seperti ikon pemutar atau animasi, yang memberi tahu pengguna bahwa sesuatu sedang berlangsung di latar belakang, misalnya saat mengirim formulir atau memuat data. Indikator ini meningkatkan pengalaman pengguna dengan menampilkan umpan balik sehingga pengguna tidak perlu menebak-nebak.

Pertama, tambahkan HTML ini ke halamanmu:

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

Kemudian, tambahkan CSS untuk menata elemen agar tampak seperti roda, dan gunakan keyframes agar roda itu terus berputar tanpa henti. Kita juga menggunakan class .hidden agar spinner tetap tersembunyi saat diperlukan.

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

Sekarang, tambahkan JavaScript untuk menampilkan/menyembunyikan spinner:

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

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

  // Setelah 3 detik, sembunyikan spinner dan tampilkan alert
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Saat tombol diklik, kita menampilkan ikon pemuatan, menunggu 3 detik, lalu menyembunyikannya dan menampilkan peringatan.

Tantangan

Mudah

Tugasmu:

Di dalam event listener klik tombol, tambahkan kode untuk menampilkan spinner dengan menghapus class "hidden". Letakkan kode ini sebelum fungsi setTimeout.

Coba sendiri

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