Implementing loading spinner using httpInterceptor and AngularJS 1.1.5

The question:

I’ve found an example of a loading spinner for http/resource calls here on SO:

As you can see the implementation works (using AngularJS 1.0.5). However if you change the sources to AngularJS 1.1.5. The example does not work anymore.

I learned that $httpProvider.responseInterceptors is deprecated in 1.1.5.
Instead one should use $httpProvider.interceptors

Unfortunately just replacing the above string in the Plunker did not solve the problem. Has anyone ever done such a loading spinner using HttpInterceptor in AngularJS 1.1.5?

Thanks for your help!


The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Thanks to Steve’s hint I was able to implement the loader:


.factory('httpInterceptor', function ($q, $rootScope, $log) {

    var numLoadings = 0;

    return {
        request: function (config) {


            // Show loader
            return config || $q.when(config)

        response: function (response) {

            if ((--numLoadings) === 0) {
                // Hide loader

            return response || $q.when(response);

        responseError: function (response) {

            if (!(--numLoadings)) {
                // Hide loader

            return $q.reject(response);
.config(function ($httpProvider) {


.directive("loader", function ($rootScope) {
    return function ($scope, element, attrs) {
        $scope.$on("loader_show", function () {
        return $scope.$on("loader_hide", function () {
            return element.hide();


#loaderDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1100;
   background-color: white;
   opacity: .6;

.ajax-loader {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;


<div id="loaderDiv" loader>
    <img src="src/assets/img/ajax_loader.gif" class="ajax-loader"/>

Method 2

“responseInterceptors” was deprecated. “interceptors” replaced it with many enhancements in a preview version. Off the top of my head I don’t remember which version. Documentation on this is sparse, so you’re probably best off examining the source code.

The gist of the change looks like this:

$httpProvider.interceptors.push(function($q, $rootScope) {
  return {
     'request': function(config) {
        // intercepts the request
     'response': function(response) {
       // intercepts the response. you can examine things like status codes
     'responseError': function(response) {
       // intercepts the response when the response was an error

In the angular source you will find documentation under “* # Interceptors” in the $HttpProvider function. There is an example usage very similar to what I posted above.

Method 3

The provided/accepted solution is fine IF you want to include JQuery in your solution, which the AngularJS team is recommending against going forward. are not supported in Angular’s JQLite….
So the following refactors are necessary to run in an non-jquery session:

Change the HTML element to add a class of ‘hidden’

<div id="loaderDiv" loader class="hidden">
     <img src="Content/images/yourgif.gif" class="ajax-loader" />

Add the hidden class to your css:

.hidden{display:none !important}

And tweak the directive thus:

(function() {
    'use strict';

        .directive('yourSpinner', yourSpinner);

    yourSpinner.$inject = ['$rootScope'];

    function yourSpinner($rootScope) {
       return function($scope, element, attrs) {
           $scope.$on("loader_show", function () {
               if (element.hasClass("hidden")) {
            return $scope.$on("loader_hide", function () {


The factory is fine as-is.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment