[CSS] 로딩 이미지와 딤 레이어

Published: 2022-06-02 by 놀이터흙이제맛

• Categories:
• css 4

• Tags:
• background-image 1
• code-snippet 39
• css 4
• dimmed-layer 1
• loading 1
• z-index 1

• 개요
• 코드

개요

로딩 이미지와 딤 레이어를 설정하는 방법을 작성한 글

참고로 해외에서는 로딩 이미지를 스피너(spinner: 뱅뱅 도는 무언가)라고 부른다. spinner images로 검색해 볼 것.

코드

#loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff36;
  z-index: 9999;
  background-image: url("/image/loading.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

<div id="loading"></div>

function onLoad() {
  let $ele = document.querySelector('#loading');
  $ele.style = 'display: block';
}

function onLoaded() {
  let $ele = document.querySelector('#loading');
  $ele.style = 'display: none';
}

살짝 흐릿한 레이어가 전면을 덮어서 로딩이 완료될 때까지 클릭 등을 막는 용도로 쓴다.

여기에 대충 적당히 움직이는 이미지를 얹으면 끗.