Add Loading Spinner for web request.

when web page is busily loading. normally we need to add a spinner for the user to kill their waiting impatience. Here, 2 steps we need to do.

• Design a set of spinner CSS.
• Intercept all the ajax requests and form submit requests to add spinner.

Design a set of spinner CSS

<style>
// the grey-transparent background
.mask {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.2);
}

// the rotating spinner
.loader-spinner {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  animation: pace-3d-spinner 2s linear infinite;
  -webkit-animation: pace-3d-spinner 2s linear infinite;
  background-size: 100%;
  position:fixed;
}

@-webkit-keyframes pace-3d-spinner {
 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes pace-3d-spinner {
 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


</style>

//The Spinner DIV
<div id="mask" class="mask">
      <div class="loader-spinner"></div>
</div>

Intercept All Ajax request to add spinner

we need to rely on an open source lib to add spinner to ajax calls: pace.js. 
https://github.hubspot.com/pace/docs/welcome/
it will expose APIs to trace ajax and page load.

<script src="/pace/pace.js"></script>
<script>
Pace.on('done', $('.mask').hide());
Pace.on('start', $('.mask').show());
Pace.on('restart', $('.mask').show());
Pace.options.ajax = {
            trackMethods: ['GET', 'POST'],
            trackWebSockets: true,
            ignoreURLs: []
        };


</script>

Intercept All form submit to add spinner

$('body').on('submit', 'form', function() {
    $('.mask').show();
});

OK. works done . now the spinner is added to trace all your request.