ajax 로딩 시 로딩 중 표시하는 방법 (jQuery Loading Spinner)

아래 코드는 로딩중을 나타내기 위한 html 코드이다.

<div id="loading_spinner">
    <div class="cv_spinner">
        <span class="spinner"></span>
    </div>
</div>

 

아래는 jQuery ajaxSetup을 통해 loading spinner 언제 보여주고 숨기는지 세팅해놓은 js 코드이다.

jQuery.ajaxSetup({
    beforeSend: function () {
        $('#loading_spinner').show();
    },
    complete: function () {
        $('#loading_spinner').hide();
    }
});

 

아래는 css 코드로 기본적으로 loading spinner를 숨겨놓고 위치를 조정해주며 spinner가 뱅글뱅글 돌도록 만들어주는 코드이다.

#loading_spinner{
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
}
.cv_spinner{
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: baseline;
    position: relative;
}
.spinner {
  width: 100px;
  height: 100px;
  border: 15px #ddd solid;
  border-top: 15px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}