반응형
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>
위 두개의 코드는 <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>
인디케이터의 경우에는 <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>위의 스크립트에 맞게 인디케이터 값을 불러온다.
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
다운로드
컬러와 높이값 등은 취향에 맞게 수정을 해주면 된다.
반응형
'Web Design > Programming' 카테고리의 다른 글
| HTML5 웹문서 작성에 대한 고찰 (0) | 2019.03.28 |
|---|---|
| 해당 요소의 텍스트를 변경하는 자바스크립트 (0) | 2019.03.21 |
| 마우스 우클릭·개발자도구[F12] 방지 자바스크립트 (0) | 2019.03.09 |
| 드래그 방지 마우스우클릭 복사방지 스크립트 (0) | 2019.02.26 |
| 티스토리 사이트 마우스드래그 배경색 변경 (0) | 2019.02.25 |
| 티스토리 사이트 부드러운 스크롤(JavaScript) (0) | 2019.02.25 |
| 사이트 미리보기 페이지 로드기능 추가하기(instant.page) (0) | 2019.02.19 |
| 아름다운 CSS와 JavaScript (0) | 2019.02.06 |
