Angular interceptor that adds a transparent loading layer on top of the page when an ajax request is being done

angular_loading.js

angular.module('MyApp')
.config(function($httpProvider) {
  var numLoadings = 0;
  var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="loading..." src="/img/loading.gif"></div>')
    .appendTo($('body')).hide();
  $httpProvider.responseInterceptors.push(function() {
    return function(promise) {
      numLoadings++;
      loadingScreen.show();
      var hide = function(r) { if (!(--numLoadings)) loadingScreen.hide(); return r; };
      return promise.then(hide, hide);
    };
  });
});