Yükleme göstergeleri

Coddy'nin HTML Journey'sinin JavaScript in Action 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 bir çark gibi görünecek şekilde biçimlendirmek için CSS ekleyin ve sürekli dönmesini sağlamak için keyframe'leri kullanın. Ayrıca, gerektiğinde yükleme simgesini (spinner) görünmez tutmak için bir .hidden sınıfı kullanıyoruz.

.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, spinner'ı 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östeririz, 3 saniye bekleriz, ardından onu gizleriz ve bir uyarı görüntüleriz.

Görev

Kolay

Göreviniz:

Butonun tıklama olayı dinleyicisinin (click event listener) içine, "hidden" sınıfını kaldırarak spinner'ı gösterecek kodu ekleyin. Bu kodu setTimeout fonksiyonundan önce yerleştirin.

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>