SweetAlert는 JavaScript로 구현된 사용자 친화적인 경고창 플러그인입니다. SweetAlert를 사용하면 표준 경고창 대신 사용자 정의된 귀여운 경고창을 표시할 수 있습니다. 이 플러그인은 다양한 기능을 제공하며, 그 중 하나는 로딩창 기능입니다.

로딩창 기능을 사용하면 사용자에게 작업이 진행 중임을 알려줄 수 있습니다. 예를 들어, AJAX 요청이나 긴 처리 시간이 필요한 작업을 수행할 때 로딩창을 표시하여 사용자가 기다리는 동안 진행 상황을 알 수 있습니다.

SweetAlert의 로딩창 기능은 다음과 같이 사용할 수 있습니다.

Swal.fire({
  title: '잠시만 기다려주세요...',
  allowOutsideClick: false,
  onBeforeOpen: () => {
    Swal.showLoading();
  },
});

위의 코드에서 Swal.fire() 함수를 호출하여 SweetAlert 경고창을 만들고, allowOutsideClick: false로 설정하여 사용자가 경고창 바깥의 영역을 클릭하지 못하도록 합니다. 그리고 onBeforeOpen 콜백 함수에서 Swal.showLoading() 함수를 호출하여 로딩창을 표시합니다. 이러면 사용자는 로딩창이 나타나는 동안 작업이 진행 중임을 알 수 있습니다.

또한, 로딩창을 닫을 때에는 Swal.close() 함수를 호출하여 닫을 수 있습니다. 예를 들어, AJAX 요청이 완료되었을 때 로딩창을 닫을 수 있습니다.

Swal.fire({
  title: '잠시만 기다려주세요...',
  allowOutsideClick: false,
  onBeforeOpen: () => {
    Swal.showLoading();
    // AJAX 요청 등 작업 수행
    // AJAX 요청 완료 후 로딩창 닫기
    Swal.close();
  },
});

SweetAlert를 사용하여 로딩창을 표시하고, 작업이 완료되면 로딩창을 닫을 수 있습니다. 이를 통해 사용자에게 작업의 진행 상황을 알리고 좀 더 나은 사용자 경험을 제공할 수 있습니다.

참고 링크:

• SweetAlert 공식 문서