라이브러리 브랜드

Korean English Japanese

티스토리 로딩바(loading bar - Indicator) 설치하기

공유하기

HTML

순서대로 HTML 편집기를 열어 아래의 코드를 복사하여 붙여넣기를 하면 된다.

<!-- 로딩 시작 -->	
<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>

 

HTML.txt
다운로드

위 두개의 코드는 <head>와</head>사이에 입력을 하면 된다. 스크립트로 일반 스크롤바와 같이 맨 상단에서 글의 본문 위치에 따라 로딩이 된다.

<div class="progress-container">
<div class="progress-bar" id="myBar">
</div> </div> </div> <script> // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; } 
</script>

 

Indicator.txt
다운로드

인디케이터의 경우에는 <div class="header">와 </div>사이에 붙여넣는다. 그러면 맨 상단에 위의 바가 형성 될 것이다. 자바스크립트로 위치에 따라 스크롤의 컬러가 차오를 것이다.

 

<!-- 로딩 바 바디부분  -->

<script> window.onload = function () { 
document.getElementById("loadingIndicator")
.style.opacity = "0"; setTimeout(function() { 
document.getElementById("loadingIndicator")
.style.display = "none";}); } </script> <div id="loadingIndicator" class="preloader"> 
<div id="loadingBar" class="loading-bar" style="width: 100%;"></div> </div>

Body.txt
다운로드

위의 스크립트에 맞게 인디케이터 값을 불러온다.

CSS


/* indicator */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 3px;
  background: #f6f6f6;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 3px;
  background: #000;
  width: 0%;
}
CSS.txt
다운로드

컬러와 높이값 등은 취향에 맞게 수정을 해주면 된다.

댓글 0
  • 라이브러리 브랜드에 새로운 의견을 남겨주세요.