1. 스타일 만들기

html과 css로 컨텐츠 가장 최상단으로 띄워
페이지가 열리면 로딩바가 제일 먼저 나타나게 함

스타일은 W3Schools의 예시 사용!
https://www.w3schools.com/howto/howto_css_loader.asp

[ HTML ]

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

[ CSS ]

<style>
.loader {
  border: 16px solid #f3f3f3; /* Light grey - border 전체 색상 지정*/ 
  border-top: 16px solid #3498db; /* Blue - 로딩 영역 색상 지정 */ 
  border-radius: 50%; /* 둥근 모서리 효과 */
  width: 120px; /* 크기 지정 */
  height: 120px;
  animation: spin 2s linear infinite; 
  /* 키프레임 애니메이션값 2초 가속도없이 일정하게 연속적인 로딩 */

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

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

이 때 transform으로 인해 translate 속성이 리셋되기 때문에
키프레임에 translate(-50%, -50%) 추가

<style>
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>

2. JQuery 작성

컨텐츠 크기나 인터넷 속도에 따라
페이지가 열리는 시간이 지연되는 만큼만 로딩바 노출되게끔 JQuery속성 추가
페이지 로딩이 완료될 시 페이지가 스르륵 변화

<script>
$(window).load(function(){
	$('.loader').fadeOut();
});
</script>

window가 실행되면 함수가 실행되는데 .loader 클래스가 fadeOut 처리됨!

너무 빨리 사라질 땐 loader 창이 어느정도 띄워졌으면 좋겠다면

<script>
$(window).load(function(){
    $('.loaderW').delay('1000').fadeOut();
  });
</script>

와 같이 딜레이 추가!

로딩 완료 전 컨텐츠를 이용할 시 사이트 이용이 불안정 할 수 있으니
block요소로 전체영역을 덮어 다른 영역을 클릭하지 못하도록 만들고
그 위에 로딩 아이콘을 띄우면 안정적으로 웹사이트를 이용할 수 있도록 유도할 수 있음

block으로 딤처리까지 완료!

참고: 코남 유튜브
https://www.youtube.com/watch?v=_ScD4ipBXC0