Yükleme göstergeleri

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 10 / 27.

Yükleme göstergeleri, kullanıcılara arka planda bir şeylerin gerçekleştiğini (bir form gönderirken veya veri yüklerken) bildiren küçük görsel öğelerdir (dönen simgeler veya animasyonlar gibi). Kullanıcıyı tahminde bulunmak zorunda bırakmak yerine geri bildirim göstererek kullanıcı deneyimini iyileştirirler.

Öncelikle, bu HTML'i sayfanıza ekleyin:

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

Ardından, öğeyi tekerlek gibi görünecek şekilde biçimlendirmek için CSS ekleyin ve sonsuza kadar dönmesini sağlamak için keyframes kullanın. Ayrıca, gerektiğinde döndürücüyü görünmez tutmak için .hidden sınıfını kullanırız.

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

Şimdi, yükleyiciyi göstermek/gizlemek için JavaScript ekleyin:

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

loadBtn.addEventListener("click", function () {
  // Spinner'ı göster
  spinner.classList.remove("hidden");

  // 3 saniye sonra, spinner'ı gizle ve uyarı göster
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

Butona tıklandığında spinner'ı gösterir, 3 saniye bekler, ardından gizler ve bir uyarı görüntüleriz.

Görev

Kolay

Görevin:

Düğmenin tıklama olay dinleyicisinin içinde, "hidden" sınıfını kaldırarak döndürücüyü gösterecek kodu ekle. Bu kodu setTimeout işlevinden önce yerleştir.

Kendin dene

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