jQuery를 사용하여 로딩 화면을 표시하고, AJAX 요청을 보내고 응답을 받는 동안 로딩 화면을 유지하는 코드 예시입니다.

<!-- 로딩 화면을 위한 HTML 요소 -->
<div id="loading-overlay">
  <div class="spinner"></div>
</div>

/* 로딩 화면 스타일 */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
}

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

// AJAX 요청 생성
$.ajax({
  url: "example.com/api/data",
  method: "GET",
  dataType: "json",
  beforeSend: function(xhr) { // 로딩 화면 표시
    $("#loading-overlay").show();
  },
  success: function(responseData) { // 로딩 화면 숨기고 응답 처리
    $("#loading-overlay").hide();
    // 응답 데이터 처리 코드
  },
  error: function(xhr, status, error) { // 로딩 화면 숨기고 에러 처리
    $("#loading-overlay").hide();
    console.log("Error: " + error);
  },
  complete: function() { // 로딩 화면 숨기기
    $("#loading-overlay").hide();
  }
});

jQuery의 $.ajax() 함수를 사용하여 AJAX 요청을 생성하고, beforeSend, success, error, complete 콜백 함수를 사용하여 각각 요청 전, 응답 성공, 에러 발생, 요청 완료 시점에서 로딩 화면을 표시하고 숨기도록 설정합니다.

beforeSend 콜백 함수에서는 AJAX 요청을 보내기 전에 로딩 화면을 표시합니다. success 콜백 함수와 error 콜백 함수에서는 응답이 도착했을 때 로딩 화면을 숨기고 각각 응답 데이터 처리 및 에러 처리를 수행합니다. complete 콜백 함수에서는 요청이 완료되었을 때 로딩 화면을 숨깁니다.

위 코드에서는 로딩 화면으로 CSS 애니메이션을 사용하였습니다. spinner 클래스를 가진 div 요소를 생성하고, CSS로 스피너 모양을 만들었습니다.