[HTML] 간단한 로딩화면 스피너 만들기

들어가기

페이지 로딩하거나 작업을 처리할 때에 화면에 표시되는 스피너를 의외로 많이 사용하게 된다.
이를 통해 사용자 입력과 접근을 제한하여 안정적으로 서비스를 동작하기 위한 목적이 있기 때문에 중요한 기능이라고도 볼 수 있다.
아주 간단하게 스피너를 동작하기 위한 내용으로 별게 없다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

CSS

먼저 CSS를 작성해보자. 단순한 애니메이션 효과까지 포함되어 있다.

.layerPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    margin: -30px 0 0 -30px;
}
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinner 2s linear infinite;
}
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

HTML

실제 적용해보자. 외부 layerPopup는 화면에 백그라운드를 어둡게 만들고 안에 spinner가 로딩 중인 스피너를 표시한다.

<div class="layerPopup">
    <div class="spinner"></div>
</div>

사용

사용할 때마다 보여주고, 사용하지 않으면 숨기면 된다.

function showSpinner() {
    document.getElementsByClassName('layerPopup')[0].style.display='block';
}
function hideSpinner() {
    document.getElementsByClassName('layerPopup')[0].style.display='none';
}

결론

아주 간단한 스피너를 만들어보았다. 실제 내용도 많지도 않으니 쉽게 이해할거라고 생각한다.
스피니 모양은 매우 다양하다.[2] 원하는 모양을 찾어서 적용하면 된다. 혹은 자신만의 스피너를 만들어도 재미있을 것 같다.
현재 스피너를 단순히 숨겼다가 보여주는데, 애니메이션 효과를 줘서 좀더 부드럽게 처리할 수도 있다. 모두 즐프하세요.ospace.

참고

[1] https://www.w3schools.com/howto/howto_css_loader.asp
[2] https://loading.io/css/