Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
[AngularJS] Loading Indicator module that handles displaying/hiding an element while requests are being made to the server.
* Loading Indicator
* @author Maikel Daloo
* @date 12th March 2013
* Creates a new module and intercepts all ajax requests.
* Every time a request is sent, we display the loading message and increment
* the enable_counter variable. Then when requests complete (whether success or error)
* we increment the disable_counter variable and we only hide the loading message
* when the enable/disable counters are equal.
* @example
* All that is required to get this working is to inject this module into your main
* module. E.g.
* var app = angular.module('my-app', ['LoadingIndicator']);
* Then the script will look for the element specified in the LoadingIndicatorHandler object
* and show/hide it.
var module = angular.module('LoadingIndicator', []);
module.config(['$httpProvider', function($httpProvider) {
var interceptor = ['$q', 'LoadingIndicatorHandler', function($q, LoadingIndicatorHandler) {
return function(promise) {
return promise.then(
function( response ) {
return response;
function( response ) {
// Reject the reponse so that angular isn't waiting for a response.
return $q.reject( response );
* LoadingIndicatorHandler object to show a loading animation while we load the next page or wait
* for a request to finish.
module.factory('LoadingIndicatorHandler', function()
// The element we want to show/hide.
var $element = $('#loading-indicator');
return {
// Counters to keep track of how many requests are sent and to know
// when to hide the loading element.
enable_count: 0,
disable_count: 0,
* Fade the blocker in to block the screen.
* @return {void}
enable: function() {
if ( $element.length ) $;
* Fade the blocker out to unblock the screen.
* @return {void}
disable: function() {
if ( this.enable_count == this.disable_count ) {
if ( $element.length ) $element.hide();
rriche commented Jun 25, 2013

love this! thanks!

adler99 commented Jul 2, 2013

Adding something like that helped me:

var spinnerFunction = function (data, headersGetter) {
return data;


Wouldn't the "Angular way" be to make the LoadingIndicatorHandler a directive?


Agree w/ Schlogen, referencing an ID is considered anti-Angular. Here's an example w/o using selectors:

Also, I believe responseInterceptors are now deprecated.


Is there a 1.2 rc2 version of this?$http

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment