로딩 스피너 애니메이션은 웹 애플리케이션에서 데이터를 로드하는 동안 사용자에게 로딩 중임을 시각적으로 보여주는 기능입니다. 이번 글에서는 자바스크립트를 사용하여 간단한 로딩 스피너 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조 만들기

로딩 스피너를 구현하기 위해 HTML 구조를 먼저 만들어야 합니다. 다음과 같이 HTML 파일을 작성해보세요.

<div id="loader"></div>

로딩 스피너는 <div> 태그로 구현되며, id 속성을 이용하여 자바스크립트에서 해당 요소를 찾을 수 있도록 합니다.

CSS 스타일 설정하기

로딩 스피너에 스타일을 적용하기 위해 CSS를 사용합니다. 아래의 코드를 CSS 파일에 추가해주세요.

#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

위의 CSS 코드는 로딩 스피너에 원 모양의 스타일을 적용하고, 애니메이션 효과를 추가합니다.

자바스크립트로 로딩 스피너 제어하기

이제 자바스크립트를 사용하여 로딩 스피너를 제어해보겠습니다. 다음의 코드를 자바스크립트 파일에 추가해주세요.

window.addEventListener('load', function() {
  var loader = document.getElementById('loader');
  loader.style.display = 'none';
});

위의 자바스크립트 코드는 페이지가 로드된 후에 실행되며, getElementById() 함수를 사용하여 로딩 스피너 요소를 찾아서 화면에서 숨깁니다.

결과 확인하기

이제 작성한 코드를 웹 브라우저에서 실행하여 로딩 스피너 애니메이션을 확인해보세요. 페이지가 로드되는 동안 로딩 스피너가 표시되다가, 페이지 로드가 완료되면 스피너가 사라질 것입니다.

마무리

이번 글에서는 자바스크립트를 사용하여 간단한 로딩 스피너 애니메이션을 구현하는 방법에 대해 알아보았습니다. 로딩 스피너는 사용자에게 로딩 중임을 시각적으로 알리는 고객 경험 측면에서 중요한 요소이므로, 여러분의 웹 애플리케이션에 적용해보시기 바랍니다.

더 많은 자바스크립트 관련 정보는 Mozilla Developer Network (MDN)에서 확인할 수 있습니다.

#javascript #로딩스피너