블로그 로딩 만들기, 로더 만들어서 기다리게 하기

블로그 로딩을 만들어서 방문자에게 로딩을 기다리도록 하는 방법에 대해 알아보도록 합시다. 로딩은 블로그의 콘텐츠가 로드 되는 동안 보여지는 애니메이션의 역할을 할 것입니다. 로딩을 만들기 위해서는 HTML, CSS, 그리고 자바스크립트를 사용할 것입니다. 다음과 같은 순서를 따라오시면 추가할 수 있습니다.

로딩 HTML (로더)

HTML은 블로그의 구조를 정의합니다. 로딩을 표시할 div 요소를 만들고 id 속성을 부여합니다. 예를 들어, id="beom-loader"라고 합시다. 다음과 같이 div 태그를 간단히 추가하여 로딩 요소를 추가할 수 있습니다. body 태그 안에서 원하는 곳에 입력해 주세요.

<div id='beom-loader'/>

로딩 CSS (로더)

CSS는 블로그의 스타일을 정의합니다. 로딩 div 요소에 원형 모양과 회전 애니메이션을 추가해보겠습니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다. 푸른색 동그란 로더가 생길 것입니다. 키프레임이 애니메이션 역할을 하게 되며 spin과 같은 이름은 제가 임의로 한 것이니 원하는대로 입맛에 맞추어 수정해 주세요.

#beom-loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

로딩 자바스크립트 (로더)

자바스크립트는 블로그의 동작을 정의합니다. 로딩 div 요소를 선택하고, 문서 객체 모델의 콘텐츠가 로딩이 완료되면 로더를 사라지도록 (페이드-아웃) 동작하겠습니다. 다음과 같은 코드를 사용할 수 있습니다.

  document.addEventListener("DOMContentLoaded", function() {                
      $("#beom-loader").fadeOut();  
      });