Best Loader in Angularjs

Add Loader to your application using http request interceptor.
Here for Loader will continue till any of your http request is running.
As soon as all requests are return, loader will disapear.
Here we have used Interceptors for HTTP requests. For more details visit here

index.html

<div ng-class="{'modal-color': isShowLoader}"></div>
<!-- add background modal color-->
<div ng-class="{'loader': isShowLoader}"></div>
<!-- add loader-->

style.css

Add style for classes .loader and .modal-color for laoder design.

app.controller.js

$rootScope.$on('loading:progress', function () {
  // show loading gif
  $scope.isShowLoader = true;
});

$rootScope.$on('loading:finish', function () {
  // hide loading gif
  $scope.isShowLoader = false;
});

app.interceptor.js

app.factory('httpRequestInterceptor', ['$rootScope', '$q', function ($rootScope, $q) {

 var loadingCount = 0;

 return {

  request: function (config) {
   if (++loadingCount === 1) {
    $rootScope.$broadcast('loading:progress');
   }
   return config || $q.when(config);
  },

  response: function (response) {
   if (--loadingCount === 0) {
    $rootScope.$broadcast('loading:finish');
   }
   return response || $q.when(response);
  },

  responseError: function (response) {
   if (--loadingCount === 0) {
    $rootScope.$broadcast('loading:finish');
   }
   return $q.reject(response);
  }
 };
}]);