ทำ spinning เมื่อมีการเรียกใช้ ajax โดยอัตโนมัติ

 .loader {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
 }

 body.loading .loader {
    overflow: hidden;
 }

 body.loading .loader {
    display: block;
 }

<div class="layout-overlay layout-sidenav-toggle"></div>

$body = $("body");

$(document).on({
    ajaxStart: function () { $body.addClass("loading"); },
    ajaxStop: function () { $body.removeClass("loading"); }
});