Javascript 화면 loading 구현 (화면 로딩 구현)

1. 로딩만 넣는 경우

html

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

javascript

const loading = {
  start: () => {
    // @로딩 시작
    const loading = document.querySelector('#loading');
    loading.style.display = 'block';
  },
  end: () => {
    // @로딩 종료
    const loading = document.querySelector('#loading');
    loading.style.display = 'none';
  },
}

css

/* loading */
#loading {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}

.spinner {
  position: relative;
  top: 50%;
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #03114E;
  animation: spin 0.6s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

 

 

2. 로딩 하단에 문구를 넣는 경우

html

  <div id="loading">
    <div class="spinner"></div>
    <div class="state-viewer-container">
      <label class="label-font" id="stateLabel"></label>
    </div>
  </div>

javascript

/**
 * 화면 로딩 시작
 */
function loadingStart() {
  const loading = document.querySelector('#loading');
  loading.style.display = 'block';
}

/**
 * 화면 로딩 종료
 */
function loadingEnd() {
  const loading = document.querySelector('#loading');
  loading.style.display = 'none';
}

css

/* loading */
#loading {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}

.state-viewer-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 150%);
}

.spinner {
  position: relative;
  top: 50%;
  margin: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #03114E;
  animation: spin 0.6s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* + FONT (필요에 맞게 수정하여 사용) */
.label-font {
  font-size: 16px;
  font-weight: bold;
}