[HTML,CSS] 로딩바

HTML

<div id="loadingBar" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <div class="loader"></div> <!-- 여기에 CSS로 스타일링할 로더 클래스를 지정합니다 -->
    </div>
</div>

CSS

<style>
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JS(사용)

$('#submit').on('click', function () {
    $('#loadingBar').show(); // 로딩바 표시

    var formData = new FormData();
    // formData 구성 코드...

    $.ajax({
        url: '/your-endpoint', // 서버의 엔드포인트 URL
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            $('#loadingBar').hide(); // 로딩바 숨기기
            window.close(); // 현재 창 닫기
            window.opener.location.reload(); // 부모 창(원래 홈페이지) 새로고침
        },
        error: function () {
            $('#loadingBar').hide(); // 에러 발생 시 로딩바 숨기기
            alert('오류가 발생했습니다.');
        }
    });
});