웹사이트에 로더 추가

12072 단어 htmlcssjavascriptwebdev
안녕하세요, 오늘은 웹사이트에 로더를 추가하는 방법에 대해 알아보겠습니다! 로더는 오랫동안 사용되어 왔으며, 웹사이트에 로더가 있을 때 사용자가 더 참을성이 있음이 입증되었습니다. 그래서 전체 페이지가 로드될 때 사라지는 로더를 설정할 것을 제안합니다.

첫 번째 단계



먼저 HTML을 설정합니다.
  • ID가 <div>인 containerLoader 태그는 (이름에서 알 수 있듯이 😉) 로더를 보유합니다.
  • <div> 클래스가 있는 containerText 태그는 페이지의 모든 콘텐츠(텍스트와 이미지 포함)를 포함할 수 있습니다.

    • <body>
  <div id="containerLoader" class="containerLoader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="containerText">
    <h1>I'm the title</h1>
    <p>Your text here</p>
  </div>
</body>


    두번째 단계



    이제 일부 CSS를 사용하여 로더를 설정합니다.

    .lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}


    아래에서 로더 애니메이션의 결과를 볼 수 있습니다.



    세 번째 단계



    이제 페이지의 스타일을 지정합니다.

    @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  background: #252525;
  color: white;
  font-family: "Roboto", sans-serif;
  margin: 0 5% 0 5%;
}

.containerText {
  display: block;
  margin: 0 auto;
  width: 900px;
  max-width: 90%;
}
.containerText p {
  text-align: justify;
}
.containerText h1 {
  text-align: center;
}

/* The disappearing animation of the loader */
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}
.hide {
  animation: hide 1s;
  animation-iteration-count: 1;
}

/* The loader container */
#containerLoader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  background: black;
}

/* This last piece of code is purely aesthetic and optional.  */
::-moz-selection {
  background: rgba(255, 255, 255, 0.22);
}

::selection {
  background: rgba(255, 255, 255, 0.22);
}


    마지막 단계



    마지막으로 페이지가 표시될 준비가 되면 로더가 사라지도록 자바스크립트를 설정합니다. 좋은 점: jQuery를 사용하지 않을 것입니다.

    document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    document.getElementById("containerLoader").classList.add('hide'); 

    setTimeout(function(){ 
      document.getElementById("containerLoader").style.display = 'none';
    }, 1000);
  }
};


    결과



    아래에서 로더의 최종 결과를 볼 수 있습니다. 애니메이션이 너무 빠르면 "다시 실행"버튼을 클릭하여 애니메이션을 다시 시작할 수 있습니다.



    이 튜토리얼이 귀하에게 유용하기를 바랍니다. 원한다면 주저하지 말고 귀하의 웹사이트에서 사용하고 댓글로 귀하의 의견을 보내주십시오. 👍
    201230_TIL
    211001 코드캠프 22일차

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage