[많이쓰는 UI] 로딩 화면

모달 팝업과 마찬가지로 로딩 화면 또한 매우 단순하게 만들 수 있습니다. 후다닥~ 살펴보겠습니다.

마크업

데이터를 불러와서 보여주는 영역을 box 라고 가정하였을 때, 다음과 같이 HTML 마크업을 작성하실 수 있습니다.

 

<section class="box">
  <!-- 로딩 -->
  <div class="loading on">
    <div class="indicator">
      <img src="https://blog.kakaocdn.net/dn/vqTEy/btq9s83QrTK/VNg4A0KJqj3yZ6f3KHX9Rk/img.gif" alt="">
    </div>
  </div>
  
  <!-- 내용 -->
  <div>...</div>
</section>

스타일

box 는 position: relative 속성을 통하여 사이즈의 범위를 제한하고, 해당 영역에 맞춰서 로딩 영역을 꽉 채우는 스타일입니다. 모달 팝업과 마찬가지로, 보이기/숨기기 기능이 있습니다. (on 클래스)

/* 상자 */
.box {
  display: inline-flex;
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #dbdbdb;
  margin: 40px 20px;
}

/* 로딩 */
.loading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
.loading .indicator img {
  width: 30px;
  height: 30px;
}
.loading.on {
  display: flex;
  z-index: 1000;
}

See the Pen Pure javascript loading area by 홍지성 (@lnbvocxe) on CodePen.