로딩 인디케이터

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 10번째.

로딩 인디케이터는 (스피너나 애니메이션과 같은) 작은 시각적 요소로, 사용자가 폼을 제출하거나 데이터를 불러올 때와 같이 백그라운드에서 무언가 진행되고 있음을 알려줍니다. 이는 사용자에게 추측하게 만드는 대신 피드백을 보여줌으로써 사용자 경험을 개선합니다.

먼저, 이 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.classList.remove("hidden");

  // 3초 후, 스피너를 숨기고 알림 표시
  setTimeout(function () {
    spinner.classList.add("hidden");
    alert("Data loaded successfully!");
  }, 3000);
});

버튼을 클릭하면 스피너를 표시하고 3초 동안 기다린 후, 스피너를 숨기고 알림창을 표시합니다.

챌린지

쉬움

수행할 작업:

버튼의 click 이벤트 리스너 내부에서, "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>