מחווני טעינה

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 10 מתוך 27.

מחווני טעינה הם רכיבים חזותיים קטנים (כמו גלגלי טעינה או אנימציות) שמודיעים למשתמשים שמשהו מתרחש ברקע (בעת שליחת טופס או טעינת נתונים). הם משפרים את חוויית המשתמש בכך שהם מציגים משוב במקום להשאיר את המשתמש לנחש.

ראשית, הוסף את קוד ה-HTML הזה לדף שלך:

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

לאחר מכן, הוסף CSS לעיצוב הרכיב כך שייראה כמו גלגל, והשתמש במַסגרות מפתח כדי לגרום לו להסתובב ללא הפסקה. אנחנו משתמשים גם במחלקה .hidden כדי להסתיר את גלגל הטעינה בעת הצורך.

.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 כדי להציג ולהסתיר את מחוון הטעינה:

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

loadBtn.addEventListener("click", function () {
  // הצג את spinner
  spinner.classList.remove("hidden");

  // לאחר 3 שניות, הסתר את spinner והצג התראה
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

כאשר לוחצים על הכפתור, אנחנו מציגים את מחוון הטעינה, ממתינים 3 שניות, ואז מסתירים אותו ומציגים התראה.

אתגר

קל

המשימה שלך:

בתוך מאזין האירועים של לחיצה על הכפתור, הוסף קוד להצגת סרגל הטעינה על ידי הסרת המחלקה "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>