[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 수 있는 로딩 스피너

14 Dec 2023

javascript

웹 애플리케이션 또는 웹사이트를 개발할 때 로딩 스피너는 사용자에게 작업이 진행 중임을 시각적으로 알려주는 중요한 요소입니다. 자바스크립트를 사용하여 로딩 스피너에 페이드 인/아웃 효과를 적용하는 방법에 대해 알아보겠습니다.

HTML

먼저, HTML 파일에 로딩 스피너를 추가합니다. 아래는 간단한 예제입니다.

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

CSS

로딩 스피너에는 CSS 스타일링이 필요합니다. 아래는 로딩 스피너를 스타일링하는 예제입니다.

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}

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

.fade-in {
  animation: fadeIn 0.5s;
}

.fade-out {
  animation: fadeOut 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

JavaScript

이제 자바스크립트로 로딩 스피너의 페이드 인/아웃 효과를 구현해보겠습니다.

const loader = document.getElementById('loader');

function showLoader() {
  loader.classList.add('fade-in');
  loader.style.display = 'block';
}

function hideLoader() {
  loader.classList.add('fade-out');
  setTimeout(() => {
    loader.style.display = 'none';
    loader.classList.remove('fade-in', 'fade-out');
  }, 500);
}

위의 코드에서 showLoader 함수는 로딩 스피너를 보여주고, hideLoader 함수는 로딩 스피너를 숨깁니다. 각 함수에서는 페이드 인/아웃을 위한 CSS 클래스를 추가하고 제거합니다.

로딩 스피너를 사용하여 사용자 경험을 향상시키고 작업이 진행 중임을 시각적으로 나타내는 것은 매우 중요합니다. 이번 예제를 참고하여 자신의 프로젝트에 로딩 스피너를 적용해보세요!

참고 자료: