웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

HTML 자바스크립트로 로딩중 메시지 만들기

Last Modified : 2018-02-19 / Created : 2017-10-17
16,852
View Count
방문자가 사이트에 접속해서 뭔가를 누르거나 액션을 취합니다. 이때 페이지가 현재 로딩중이라는 메시지를 보여주려면 어떻게 할까요? 페이지를 비동기식, ajax로 호출하는 경우 방문자에게 현재 페이지가 로딩중이라는 메시지를 정확히 보여주는 것이 좋을 것입니다. 아래는 이를 구현하는 스크립트를 만들어 실행해보는 예제입니다.




먼저 로딩 메시지를 시각적으로 표현하기 위해 아래와 같이 html 및 css를 구현합니다.



# 로딩중 메시지 HTML 만들기

먼저 실제로 예제를 동작하기 위해 하나의 버튼을 만들었습니다. 이 버튼은 ajax등을 사용하여 콘텐츠를 동적으로 호출하는 것처럼 로딩중이라는 인터페이스를 보여줍니다. 아래의 스크립트 함수를 호출합니다.

<button onclick="isLoading.start()">Loading Start</button>

이제 위 버튼을 누르면 로딩중을 알리기 위해 화면에 표시됩니다. 아래의 loading.js파일을 포함시켜 동작시키게됩니다.

! wf_loading.js

isloading = {
  start: function() {
    if (document.getElementById('wfLoading')) {
      return;
    }
    var ele = document.createElement('div');
    ele.setAttribute('id', 'wfLoading');
    ele.classList.add('loading-layer');
    ele.innerHTML = '<span class="loading-wrap"><span class="loading-text"><span>.</span><span>.</span><span>.</span></span></span>';
    document.body.append(ele);

    // Animation
    ele.classList.add('active-loading');
  },
  stop: function() {
    var ele = document.getElementById('wfLoading');
    if (ele) {
      ele.remove();
    }
  }
}

위 스크립트는 우선 기존에 동일한 엘리먼트가 존재하는지부터 확인합니다. 만약 동일한 엘리먼트가 있다면 반복해서 생성하지 않기 위함이죠. 실행하면 로딩중인 모습이 아래의 스크린샷처럼 나타나게 됩니다.

스크린샷) 화면 전체에 로딩중을 알려주는 모습

텍스트가 아닌 도트기호(.)를 연속해서 세 개를 만든 후 css 애니메이션으로 색을 일정시간에 따라 순차적으로 바뀌게 하였습니다. 또한 스타일을 적용하기 위해 wf_loading.css파일을 만들었습니다.

! css3 animation에 대하여 알아보려면 아래를 클릭하세요
http://webisfree.com/2017-08-07/css3-animation-프로퍼티를-사용한-애니메이션-구현하기


! wf_loading.css
.loading-layer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(68, 68, 68, 0.3);
    z-index: 11111;
}
.loading-layer .loading-wrap {
    display: table;
    width: 100%;
    height: 100%;
}
.loading-layer .loading-wrap .loading-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    text-shadow: 2px 3px 2.6px #a2a2a2;
    font-size: 3.8em;
    position: relative;
    top: -20px;
}
.loading-layer.active-loading .loading-wrap .loading-text span:nth-child(1) {
  animation: loading-01 0.82s infinite;
}
.loading-layer.active-loading .loading-wrap .loading-text span:nth-child(2) {
  animation: loading-02 0.82s infinite;
}
.loading-layer.active-loading .loading-wrap .loading-text span:nth-child(3) {
  animation: loading-03 0.82s infinite;
}

@keyframes loading-01 {
  25% {
    color: #000;
  }
  50% {
    color: #fff;
  }
}
@keyframes loading-02 {
  50% {
    color: #000;
  }
  75% {
    color: #fff;
  }
}
@keyframes loading-03 {
  75% {
    color: #000;
  }
  100% {
    color: #fff;
  }
}

이제 모두 끝났습니다. 로딩중인 경우에는 isloading.start()를 사용하며 중지할 경우 isloading.stop() 메소드를 실행합니다.

시작하기 - isloading.start()
중지하기 - isloading.stop()

이제 위 코드를 적용하기 위해서 static한 파일 위치에 아래처럼 js와 css를 추가합니다.

<script src="/wf_loading.js" type="text/javascript"></script>
<link href="/wf_loading.css" rel="stylesheet" type="text/css" />



# 로딩중 인터페이스 실제로 구현해보기

위에서 만든 소스를 아래에서 직접 버튼을 클릭해서 구현해보세요. 아래 예제는 3초 후 자동으로 중지되도록 하였습니다.

Previous

nodejs로 간단한 웹서버 구축하는 방법 및 예제보기

Previous

nvm 사용하여 node 및 npm 버전 변경하기