AngularJS Loading Spinner Example

var mod = angular.module('loading', []);

mod.factory('loadingService', function() {
  var service = {
    requestCount: 0,
    isLoading: function() {
      return service.requestCount > 0;
    }
  };
  return service;
});

mod.factory('onStartInterceptor', function(loadingService) {
  return function (data, headersGetter) {
    loadingService.requestCount++;
    return data;
  };
});

// This is just a delay service for effect!
mod.factory('delayedPromise', function($q, $timeout){
  return function(promise, delay) {
    var deferred = $q.defer();
    var delayedHandler = function() {
      $timeout(function() { deferred.resolve(promise); }, delay);
    };
    promise.then(delayedHandler, delayedHandler);
    return deferred.promise;
  };
});

mod.factory('onCompleteInterceptor', function(loadingService, delayedPromise) {
  return function(promise) {
    var decrementRequestCount = function(response) {
      loadingService.requestCount--;
      return response;
    };
    // Normally we would just chain on to the promise but ...
    //return promise.then(decrementRequestCount, decrementRequestCount);
    // ... we are delaying the response by 2 secs to allow the loading to be seen.
    return delayedPromise(promise, 2000).then(decrementRequestCount, decrementRequestCount);
  };
});

mod.config(function($httpProvider) {
  $httpProvider.responseInterceptors.push('onCompleteInterceptor');
});

mod.run(function($http, onStartInterceptor) {
  $http.defaults.transformRequest.push(onStartInterceptor);
});

mod.controller('LoadingCtrl', function($scope, loadingService) {
  $scope.$watch(function() { return loadingService.isLoading(); }, function(value) { $scope.loading = value; });
});

angular.module('project', ['mongolab', 'loading']).
  config(function($routeProvider) {
    $routeProvider.
      when('/list', {controller:ListCtrl, templateUrl:'list.html'}).
      when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
      when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
      otherwise({redirectTo:'/list'});
  });


function ListCtrl($scope, Project) {
  $scope.projects = Project.query();
}


function CreateCtrl($scope, $location, Project) {
  $scope.save = function() {
    Project.save($scope.project, function(project) {
      $location.path('/edit/' + project._id.$oid);
    });
  };
}


function EditCtrl($scope, $location, $routeParams, Project) {
  var self = this;

  Project.get({id: $routeParams.projectId}, function(project) {
    self.original = project;
    $scope.project = new Project(self.original);
  });

  $scope.isClean = function() {
    return angular.equals(self.original, $scope.project);
  };

  $scope.destroy = function() {
    self.original.destroy(function() {
      $location.path('/list');
    });
  };

  $scope.save = function() {
    $scope.project.update(function() {
      $location.path('/list');
    });
  };
}

// This is a module for cloud persistance in mongolab - https://mongolab.com
angular.module('mongolab', ['ngResource']).
    factory('Project', function($resource) {
      var Project = $resource('https://api.mongolab.com/api/1/databases' +
          '/angularjs/collections/projects/:id',
          { apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
            update: { method: 'PUT' }
          }
      );

      Project.prototype.update = function(cb) {
        return Project.update({id: this._id.$oid},
            angular.extend({}, this, {_id:undefined}), cb);
      };

      Project.prototype.destroy = function(cb) {
        return Project.remove({id: this._id.$oid}, cb);
      };

      return Project;
    });

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="http://code.angularjs.org/1.0.2/angular-resource.js"></script>
  <script src="app.js"></script>
  <script src="loading.js"></script>
</head>
<body>
<div ng-app="project">
  <h2>JavaScript Projects</h2>
  <div ng-controller="LoadingCtrl"><span ng-show="loading">Loading</span></div>
  <div ng-view></div>

  <!-- CACHE FILE: list.html -->
  <script type="text/ng-template" id="list.html">
    <input type="text" ng-model="search" class="search-query" placeholder="Search">
    <table>
      <thead>
      <tr>
        <th>Project</th>
        <th>Description</th>
        <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="project in projects | filter:search | orderBy:'name'">
        <td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
        <td>{{project.description}}</td>
        <td>
          <a href="#/edit/{{project._id.$oid}}"><i class="icon-pencil"></i></a>
        </td>
      </tr>
      </tbody>
    </table>
  </script>



  <!-- CACHE FILE: detail.html -->
  <script type="text/ng-template" id="detail.html">
    <form name="myForm">
      <div class="control-group" ng-class="{error: myForm.name.$invalid}">
        <label>Name</label>
        <input type="text" name="name" ng-model="project.name" required>
        <span ng-show="myForm.name.$error.required" class="help-inline">
            Required</span>
      </div>
    
      <div class="control-group" ng-class="{error: myForm.site.$invalid}">
        <label>Website</label>
        <input type="url" name="site" ng-model="project.site" required>
        <span ng-show="myForm.site.$error.required" class="help-inline">
            Required</span>
        <span ng-show="myForm.site.$error.url" class="help-inline">
            Not a URL</span>
      </div>
    
      <label>Description</label>
      <textarea name="description" ng-model="project.description"></textarea>
    
      <br>
      <a href="#/list" class="btn">Cancel</a>
      <button ng-click="save()" ng-disabled="isClean() || myForm.$invalid"
              class="btn btn-primary">Save</button>
      <button ng-click="destroy()"
              ng-show="project._id" class="btn btn-danger">Delete</button>
    </form>
  </script>
</div>
</body>
</html>

/* Put your css in here */