jQuery Wait, Loading animation

When any type of jQuery process fire show waiting screen . You copy this code in Master page or your web page only. And show output.

Example :

<div class="WaitScreen">
</div>
<style type="text/css">
        .WaitScreen {
            display: none;
            position: fixed;
            z-index: 100000;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba( 255, 255, 255, .4 ) url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFEgxZRlEBM1TGgRTuKM_JPGnpR5iLi5YBVkIIP5zZz2SGCC0LQlEqnZXQWf1SiUEH9MI_d7MO29ztECollKuylzSdlpeRnG34GZJXGxo45Gho0JfRiGu8UwWlQrnjmH0Efp1R-XM4V8L/s1600/loading.gif') 50% 50% no-repeat;
        }
       

        body.loading {
            overflow: hidden;
        }

        body.loading .WaitScreen {
                display: block;
        }
    </style>
    <script type="text/javascript">

        $body = $("body");

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


    </script>