[ Html, Css, Javascript ] Spinner / Loading Screen 만들기 / 로딩 화면 만들기

안녕하세요 상훈입니다.

Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다.

BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다.

이미지를 클릭하시면 부트스트랩으로 이동합니다.

html

<div id="loader">
    <div class="spinner-border text-info position-absolute top-50 start-50" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

Css

#loader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.8;
    background: rgb(156, 154, 154);
    z-index: 99;
    text-align: center;
}

#loader>div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

 

Javascript

$(window).on('load', function () {
    $('#loader').hide();
})

 - 제이쿼리를 사용할 수 있게 해야합니다.

↓↓  제이쿼리 cdn 적용하는 법 ↓↓

[ jQuery ] jQuery 제이쿼리 CDN 링크 공유

 

↓↓  BootStrap cdn 적용하는 법 ↓↓

 

[ BootStrap ] 부트스트랩 cdn 적용하는 방법

 

이상입니다.