Badhrinath Canessane Badhrinath Canessane - 3 months ago 106x
AngularJS Question

Angularjs loading screen on ajax request

Using Angularjs , I need to show a loading screen (a simple spinner) until ajax request is complete. Please suggest any idea with a code snippet.


Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;

                scope.$watch(scope.isLoading, function (v)


With this directive, all you need to do is to give any loading animation element an 'loading' attribute:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

You can have multiple loading spinners on the page. where and how to layout those spinners is up to you and directive will simply turn it on/off for you automatically.