새소식

인터넷/티스토리 꾸미기

웹사이트 로딩바 만들기

  • -

티스토리에 로딩화면을 만들어보자.

우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 결국 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다.

즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다.

HEAD와 /HEAD 사이에 추가

<style>
.preloader {
display:inline;
z-index: 2000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
transition: opacity .65s ease;
}
.loading-bar {
width: 12%;
height: 4px;
background-color: #000;
transition: width 1000ms cubic-bezier(.25, 0, 0, 1); 
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
  	requestAnimationFrame(function() {
			document.getElementById("loadingBar").style.width = "100%";
      });
    });
</script>

필자가 사용한 로딩화면 CSS 코드다.

여기에서 포인트는 .loading-bar 에서 background-color와 바로 밑에 transition의 width를 변경하는 것인데 background-color는 알다시피 로딩바의 색을 조절할 수 있고 width는 로딩바의 길이를 말하는데 클수록 자체 로딩이 길어진다. 개인적으로는 1500이 적당하다고 생각한다. head가 길어지는 것이 싫으신분은 CSS에 style 부분을 추가하시고 script 부분은 js파일로 만들어서 업로드 후 불러오는 쪽으로 하시길 바란다.

BODY 바로 밑에 추가

<script>
window.onload = function () {
document.getElementById("loadingIndicator").style.opacity = "0";
setTimeout(function() {
    document.getElementById("loadingIndicator").style.display = "none";}, 450);
}
</script>

<div id="loadingIndicator" class="preloader">
     <div id="loadingBar" class="loading-bar"></div>
</div>

BODY의 바로 밑에 그대로 복사해서 붙이면 끝이다.

마지막 부분에 450수치는 로딩이 완료후 페이드 되는 수치다. 0으로 하면 페이드가 되지 않고 바로 보인다. 그러나 변경하는 걸 추천하지 않는다. 이제 새로 고침을 하면 사이트 상단에 로딩바가 보일 것이다.
궁금한점이 있거나 안되는 부분이 있다면 댓글 남겨주시면 답해드리도록 하겠다.

출처 https://thinking-twins.webflow.io/preloader

Contents

포스팅 주소 복사 완료😎

PC버전 공감은 상단에 있어요!😍