• 홈
  • 로딩화면

전체 화면 로딩 오버레이

API 호출·저장 등 비동기 작업 중 화면 전체를 덮는 로딩 UI입니다.

열기: loadingShow() · 닫기: loadingHide()

로딩 중에는 role="status" + aria-live="polite"로 상태를 알립니다.

표시 중 #wrap에 aria-hidden="true"를 적용해 배경 콘텐츠를 보조기기에서 숨깁니다.

스피너는 장식(aria-hidden="true")이며, 안내 문구가 실제 상태 메시지입니다.

* prefers-reduced-motion 환경에서는 회전 속도를 완화합니다.

미리보기 (영역 내)

실서비스는 전체 화면(position: fixed) 오버레이를 사용합니다.

기본 마크업

<!-- #wrap 밖, </body> 직전 -->
<div id="loadingOverlay" class="loading-overlay" aria-hidden="true" aria-busy="false">
  <div class="loading-box" role="status" aria-live="polite">
    <div class="spinner" aria-hidden="true"></div>
    <p class="loading-msg">로딩 중입니다. 잠시만 기다려 주세요.</p>
  </div>
</div>
TOP