How to Create a Loader in AngularJS

Projects Inventory

1 day ago

1. HTML (index.html)

html

<!DOCTYPE html>
<html ng-app="loaderApp">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Loader Example</title>
  <!-- CDN dependencies -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="..." crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="..." crossorigin="anonymous">
  <style>
    /* Simple overlay loader styling */
    .loader-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      flex-direction: column;
    }
    .loader-text {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body ng-controller="MainCtrl as vm">

  <div class="container mt-5">
    <h3>AngularJS Loader Demo</h3>
    <button class="btn btn-primary" ng-click="vm.doManualAction()">Manual Action (spinner)</button>
    <button class="btn btn-success" ng-click="vm.doHttpAction()">HTTP Action (interceptor)</button>

    <div class="mt-3">
      <p><strong>Note:</strong> The loader shows automatically during the simulated HTTP call; the manual one uses explicit toggling.</p>
    </div>
  </div>

  <!-- Loader overlay: shows when vm.loading is true -->
  <div class="loader-overlay" ng-show="vm.loading">
    <!-- Font Awesome spinner -->
    <i class="fa-solid fa-spinner fa-spin fa-3x"></i>
    <div class="loader-text">Loading, please wait...</div>
    <!-- Or optionally a GIF -->
    <!-- <img src="https://i.gifer.com/ZZ5H.gif" alt="loader gif" width="80" /> -->
  </div>

  <!-- AngularJS & app script -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
  <script src="angular.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS Loader Example</title>

<style>

/* Simple overlay loader styling */

.loader-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.75);

display: flex;

align-items: center;

justify-content: center;

z-index: 9999;

flex-direction: column;

}

.loader-text {

margin-top: 10px;

font-weight: bold;

}

</style>

</head>

<h3>AngularJS Loader Demo</h3>

<button class="btn btn-primary" ng-click="vm.doManualAction()">Manual Action (spinner)</button>

<button class="btn btn-success" ng-click="vm.doHttpAction()">HTTP Action (interceptor)</button>

<p><strong>Note:</strong> The loader shows automatically during the simulated HTTP call; the manual one uses explicit toggling.</p>

</div>

<div class="loader-text">Loading, please wait...</div>

</div>

</body>

</html>

2. AngularJS Logic (angular.js)

javascript

(function () {
  angular.module('loaderApp', [])
    // HTTP interceptor to auto-toggle loader during $http requests
    .factory('loaderInterceptor', ['$q', 'LoaderService', function($q, LoaderService) {
      return {
        request: function(config) {
          LoaderService.show();
          return config;
        },
        response: function(response) {
          LoaderService.hide();
          return response;
        },
        responseError: function(rejection) {
          LoaderService.hide();
          return $q.reject(rejection);
        }
      };
    }])
    .config(['$httpProvider', function($httpProvider) {
      $httpProvider.interceptors.push('loaderInterceptor');
    }])
    .service('LoaderService', ['$timeout', function($timeout) {
      var _visible = false;
      return {
        show: function() {
          _visible = true;
        },
        hide: function() {
          // optional small delay to avoid flicker
          $timeout(function() {
            _visible = false;
          }, 100);
        },
        isVisible: function() {
          return _visible;
        }
      };
    }])
    .controller('MainCtrl', ['$timeout', '$http', 'LoaderService', function($timeout, $http, LoaderService) {
      var vm = this;
      vm.loading = false;

      // Watch the service's visibility
      vm._syncLoader = function() {
        vm.loading = LoaderService.isVisible();
      };

      // Poll sync (could also use $scope.$watch with a getter)
      setInterval(vm._syncLoader, 100);

      // Manual toggle example
      vm.doManualAction = function() {
        vm.loading = true;
        // simulate some async work
        $timeout(function() {
          vm.loading = false;
        }, 1500);
      };

      // HTTP call example (interceptor manages loader)
      vm.doHttpAction = function() {
        // Example: simulate HTTP call (you can replace with real endpoint)
        $http.get('https://jsonplaceholder.typicode.com/posts/1')
          .then(function(resp) {
            console.log('HTTP success', resp.data);
          })
          .catch(function() {
            console.log('HTTP error');
          });
      };
    }]);
})();

(function () {

angular.module('loaderApp', [])

// HTTP interceptor to auto-toggle loader during $http requests

.factory('loaderInterceptor', ['$q', 'LoaderService', function($q, LoaderService) {

return {

request: function(config) {

LoaderService.show();

return config;

response: function(response) {

LoaderService.hide();

return response;

responseError: function(rejection) {

LoaderService.hide();

return $q.reject(rejection);

}

};

}])

.config(['$httpProvider', function($httpProvider) {

$httpProvider.interceptors.push('loaderInterceptor');

}])

.service('LoaderService', ['$timeout', function($timeout) {

var _visible = false;

return {

show: function() {

_visible = true;

hide: function() {

// optional small delay to avoid flicker

$timeout(function() {

_visible = false;

}, 100);

isVisible: function() {

return _visible;

}

};

}])

.controller('MainCtrl', ['$timeout', '$http', 'LoaderService', function($timeout, $http, LoaderService) {

var vm = this;

vm.loading = false;

// Watch the service's visibility

vm._syncLoader = function() {

vm.loading = LoaderService.isVisible();

};

// Poll sync (could also use $scope.$watch with a getter)

setInterval(vm._syncLoader, 100);

// Manual toggle example

vm.doManualAction = function() {

vm.loading = true;

// simulate some async work

$timeout(function() {

vm.loading = false;

}, 1500);

};

// HTTP call example (interceptor manages loader)

vm.doHttpAction = function() {

// Example: simulate HTTP call (you can replace with real endpoint)

$http.get('https://jsonplaceholder.typicode.com/posts/1')

.then(function(resp) {

console.log('HTTP success', resp.data);

})

.catch(function() {

console.log('HTTP error');

});

};

}]);

})();

3. Explanation & Best Practices

ng-show="vm.loading": Toggles the loader overlay. You can switch to ng-if

if you want DOM removal instead of visibility toggling.
Interceptor (loaderInterceptor): Automatically shows the loader on every $http

request and hides it when the response returns or errors. This centralizes loader logic for AJAX calls.
Manual control: doManualAction() demonstrates how to explicitly show/hide the loader when not using $http (e.g., processing logic).
Debounce/hide delay: A slight delay on hide prevents flicker if requests are extremely fast.
Fallback GIF: Uncomment the GIF image line if you prefer using an animated GIF instead of the Font Awesome spinner.

4. Optional Enhancements

Add a global spinner service event bus so non-controller code can trigger the loader.
Replace setInterval sync with $scope.$watch or use a binding via $rootScope/$broadcast for cleaner syncing.
Support multiple simultaneous requests by maintaining a counter instead of a boolean (increment on request, decrement on response, show while count > 0).

Full Code of Create Angular Loading

1. HTML (index.html)

2. AngularJS Logic (angular.js)

3. Explanation & Best Practices

4. Optional Enhancements

Related Posts: