angularjsajaxbusyindicator

Show spinner GIF during an $http request in AngularJS?


I am using the $http service of AngularJS to make an Ajax request.

How can a spinner GIF (or another type of busy indicator) be shown while the Ajax request is executing?

I don't see anything like an ajaxstartevent in the AngularJS documentation.


Solution

  • Here are the current past AngularJS incantations:

    angular.module('SharedServices', [])
        .config(function ($httpProvider) {
            $httpProvider.responseInterceptors.push('myHttpInterceptor');
            var spinnerFunction = function (data, headersGetter) {
                // todo start the spinner here
                //alert('start spinner');
                $('#mydiv').show();
                return data;
            };
            $httpProvider.defaults.transformRequest.push(spinnerFunction);
        })
    // register the interceptor as a service, intercepts ALL angular ajax http calls
        .factory('myHttpInterceptor', function ($q, $window) {
            return function (promise) {
                return promise.then(function (response) {
                    // do something on success
                    // todo hide the spinner
                    //alert('stop spinner');
                    $('#mydiv').hide();
                    return response;
    
                }, function (response) {
                    // do something on error
                    // todo hide the spinner
                    //alert('stop spinner');
                    $('#mydiv').hide();
                    return $q.reject(response);
                });
            };
        });
    
    //regular angular initialization continued below....
    angular.module('myApp', [ 'myApp.directives', 'SharedServices']).
    //.......
    

    Here is the rest of it (HTML / CSS)....using

    $('#mydiv').show(); 
    $('#mydiv').hide(); 
    

    to toggle it. NOTE: the above is used in the angular module at beginning of post

    #mydiv {  
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:1000;
        background-color:grey;
        opacity: .8;
     }
    
    .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="mydiv">
        <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
    </div>