[JQuery] jquery-loading spinner (js 라이브러리 파일 X) ajax loading

■ JQuery jquery-loading spinner (js 라이브러리 파일 X) ajax loading

---

■ 사용법

js 라이브러리 이용하여 loading 구현하는 방법도 있지만 직접 div영역을 추가하여 loading spinner 을 구현하는 방법
* ajax 호출 후 데이터 받기 전 my-spinner 영역을 show(); 리턴되면 hide(); 시킴

loader_spinner.gif

0.01MB

<style>
#my-spinner { width: 100%; height: 100%; top: 0; left: 0; display: none; opacity: .6; background: silver; position: absolute; z-index: 2; }
#my-spinner div { width: 100%; height: 100%; display: table; }
#my-spinner span { display: table-cell; text-align: center; vertical-align: middle; }
#my-spinner img { background: white; padding: 1em; border-radius: .7em; }
</style>

<div id='my-spinner'>
  <div>
    <span>
    	<img src='//cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif'>
    </span>
  </div>
</div>
<button type="button" onclick="getData()">ajax 호출</button>

<script type="text/javascript">
  function getData(){
    $.ajax({
      method: 'POST',
      url: "${path}/filepath.php",
      data: {
      	value : "tmpVal"
      },
      dataType: "json",
      beforeSend : function(request){
        // Performed before calling Ajax
        $("#my-spinner").show();
      },
      success: function (data) {
        // Do when ajax call success
        $("#my-spinner").hide();
      },
      error: function() {
        // Do when ajax call fail
        $("#my-spinner").hide();
      }
    });
  }