مؤشرات التحميل

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 10 من 27.

مؤشرات التحميل هي عناصر مرئية صغيرة (مثل الحلقات الدوارة أو الرسوم المتحركة) تتيح للمستخدمين معرفة أن هناك شيئاً ما يحدث في الخلفية (عند إرسال نموذج أو تحميل بيانات). فهي تحسن تجربة المستخدم من خلال إظهار استجابة بدلاً من ترك المستخدم في حالة تخمين.

أولاً، أضف كود HTML هذا إلى صفحتك:

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

بعد ذلك، أضف CSS لتنسيق العنصر بحيث يبدو كعجلة، واستخدم keyframes لجعله يدور باستمرار دون توقف. نستخدم أيضاً فئة .hidden لإبقاء أداة التحميل (spinner) مخفية عند الحاجة.

.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 لإظهار/إخفاء مؤشر التحميل (spinner):

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

عند النقر على الزر، نقوم بإظهار مؤشر التحميل (spinner)، وننتظر لمدة 3 ثوانٍ، ثم نخفيه ونعرض تنبيهاً.

التحدي

سهل

مهمتك:

داخل مستمع حدث النقر (click event listener) الخاص بالزر، أضف كوداً لإظهار أداة التحميل (spinner) عن طريق إزالة الفئة "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>