[Javascript/CSS] 로딩창 만들기

[JAVASCRIPT/CSS] 로딩창 만들는 방법

1. html

<div class="loader">
  <div class="loader-bar"></div>
</div>

2. css

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}

.loader-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 10px;
  margin-top: -5px;
  margin-left: -50px;
  background-color: white;
  animation: loader-bar 2s ease-in-out infinite;
}

@keyframes loader-bar {
  0% {
    transform: translateX(-50%) scaleX(0);
  }
  50% {
    transform: translateX(-50%) scaleX(1);
  }
  100% {
    transform: translateX(-50%) scaleX(0);
  }
}

위 코드는 로딩창의 기본적인 디자인을 구성합니다. 배경색은 검은색의 반투명한 색상으로 설정되고, 로딩바는 가운데 정렬되며 좌우로 애니메이션 효과가 적용됩니다. 이제 JavaScript를 이용해 로딩창을 표시하고 숨기는 기능을 구현합니다.

3. javascript

const loader = document.querySelector('.loader');

function showLoader() {
  loader.style.display = 'block';
}

function hideLoader() {
  loader.style.display = 'none';
}

아래 코드는 로딩창을 표시하는 showLoader 함수와 숨기는 hideLoader 함수를 구현한 것입니다. 이제 필요한 곳에서 showLoader 함수를 호출해 로딩창을 표시하고, 작업이 끝나면 hideLoader 함수를 호출해 로딩창을 숨기면 됩니다.

showLoader();

// 로딩창 표시 후 작업 수행
// ...

hideLoader();