like Maxim Shoustin suggested you can use the angularjs-spinner from Jim Lavin which uses (deprecated) Response Interceptors.

I think it's explained best here :
http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/

In a nutshell, in his first solution, what you have to do for your ng-grid app is:

1) Add the loading gif to your html (for loading gif look here)

<div id=loadingWidget class=row-fluid ui-corner-all style=padding: 0 .7em; loading-widget >

    <div class=loadingContent>

        <p>

            <img alt=Loading  Content src=images/ajax-loader.gif /> Loading

        </p>

    </div>

</div>

2) In your code as soon as you have declared your app level module add the Response Interceptors for http requests to the configuration block

var app = angular.module('myCoolGridApp', ['ngGrid']);



app.constant('_START_REQUEST_', '_START_REQUEST_');

app.constant('_END_REQUEST_', '_END_REQUEST_');

app.config(['$httpProvider', '_START_REQUEST_', '_END_REQUEST_', function ($httpProvider, _START_REQUEST_, _END_REQUEST_) {

    var $http,

     interceptor = /* see extra details on codingsmackdown.tv */

    $httpProvider.responseInterceptors.push(interceptor); 

}

3) and then add your loadingWidget directive

app.directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {

return {

    restrict: A,

    link: function (scope, element) {

        element.hide();

        scope.$on(_START_REQUEST_, function () {element.show();});

        scope.$on(_END_REQUEST_, function () {element.hide();});

    }

 };

}]);

See more details at codingsmackdown