CSS 페이지 로더 예제

Delang 독자는 내가 조금 전에 게시한 CSS 페이지 로더 개념에 문제가 있었다. 그래서 저는 가서 예시 페이지를 만들었습니다. 이것은 매우 간단하며, 실제로 무언가를 로딩하는 "가짜"일 뿐입니다. 예를 들어, 실제로 아무것도 로드하지 않습니다. 재설정하려면 페이지를 새로 고쳐야 합니다.

이전에 놓친 경우, DIV를 만들면 전체 화면을 흰색으로 덮을 수 있으며, 애니메이션 페이지 로더는 디스플레이 속성을 없음으로 설정할 수 있습니다.

#page-loader {
    position: absolute;
    top: 0;
    bottom: 0%;
      left: 0;
    right: 0%;
      background-color: white;
    z-index: 99;
    display: none;
    text-align: center;
    width: 100%;
      padding-top: 25px;
}

그런 다음 앵커 요소의 온클릭 파라미터에서 자바스크립트를 캡처하여 해당 DIV를 표시할 수 있습니다.

<a href="#" onclick="javascript:document.getElementById('page-loader').style.display='block';">Click here</a>