Ajay Beniwal Ajay Beniwal - 1 year ago 224
AngularJS Question

Showing Spinner GIF during $http request in angular

I am using the

service of angular to make an ajax request.

How to show a loader gif during the ajax request?

I don't see any
or similar event in documentation.

Answer Source

Here are the current past AngularJS incantations:

angular.module('SharedServices', [])
    .config(function ($httpProvider) {
        var spinnerFunction = function (data, headersGetter) {
            // todo start the spinner here
            //alert('start spinner');
            return data;
// 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');
                return response;

            }, function (response) {
                // do something on error
                // todo hide the spinner
                //alert('stop spinner');
                return $q.reject(response);

//regular angular initialization continued below....
angular.module('myApp', [ 'myApp.directives', 'SharedServices']).

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


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

#mydiv {  
    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"/>