[Javascript] 로딩페이지 만들기

평소에 로딩이 오래걸리는 페이지들은 애니메이션이나 로딩중이라는 문구를 사용해야 기다리는 사람이 좀 덜 지루하게 만들 수 있다. 그래서 한 번 만들어 보았다. 이 페이지는 옛날에 포트폴리오로 직접 혼자서 만들었던 페이지고 로드되는 시간이 짧아서 아쉽지만 표현은 할 수 있었다.

 

HTML

        <div class="loading">

            <h1>로딩중입니다...</h1>

        </div>

우선 간단하게 loading div를 html 제일 위에 만들어준다.

 

CSS

.loading{

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(255, 255, 255, 0.8);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 60px;

    z-index: 9999;

    transition: all 0.3s;

}

로딩페이지는 우선 모든 가장 위에 올라와야하기 때문에 position:absolute로 띄워주고 화면에 꽉차게 한 후 z-index로 어떤 상황에서도 제일 위에 오게 숫자를 높게 작성해주었다.

 

JAVASCRIPT

window.onload = function(){

  document.querySelector('.loading').style.visibility = 'hidden'

  document.querySelector('.loading').style.opacity = 0

}

사실 로딩페이지 처음 만들어보는데 검색하면서 이렇게 간단한거였나 싶을 정도 였다. 우선 코드 해석을 하자면 이 페이지가 로딩이 다 되었을 때 함수를 실행시켜주는 것이다. 즉 평소에는 보이게 해뒀다가 로딩이 다 되면 loading div의 스타일 속성을 안보이게 바꾸면 그게 끝인 것이었다.

 

이렇게 간단하지만 로딩이 오래걸리는 페이지에는 필수적인 요소이기 때문에 예쁜 애니메이션을 만들어서 눈을 즐겁게 해주는 것도 좋은 방법인 것같다. 본인이 애니메이션 이미지를 어떻게 만드는지 모른다면 밑의 사이트를 사용하면 유용할 것이다.

https://loading.io/