Automatically Add a Custom Loading Bar In AngularJs

Automatically add a custom loading bar or spinner in AngularJs application

Adding a custom loading progress bar or spinner in a large application can be a tiring task, as you have to listen in on each request, and then signal your view to show a bar or spinner for the same and then update it periodically. Then if you have multiple requests being sent simultaneously, then the complexity of showing it worsens.

If you want a simple solution to this problem, we can use the angular-loading-bar. Its a simple & thin plugin, that automatically adds a loading bar and spinner into your application whenever a request is sent. It even bundles multiple requests being fired together and updates the progress bar accordingly. All you need to do is include its module in your angular app, and include its javascript and CSS file in your html file, and that's it.

Installation

npm install angular-loading-bar

Now, include it in your angular application.

angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])

You'll also need to inlcude ngAnimate as that is a dependency of this module. Next, just include the following in your html:

<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>

Configuration

Additionally, you can configure the angular-loading-bar's behaviour using its provider cfpLoadingBarProvider. You can turn the spinner on or off using the following:

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = false;
  }])

To turn the progress bar off or on, do this:

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeBar = false;
  }])

You can even set a custom spinner template, as shown below:

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Loading...</div>';
  }])

The angular-loading-bar will be displayed only for requests that take longer than 100ms to respond. You can set your custom latency threshold as follows:

angular.module('myApp', ['angular-loading-bar'])
  .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.latencyThreshold = 500;
  }])

There may be cases when you want to load a heavy request in the background, without interrupting the user. In such cases, you can set an additional property ignoreLoadingBar inside your request's configuration object, and that particular request will be ignored by the angular loading bar.

// ignore a particular $http GET:
$http.get('/status', {
  ignoreLoadingBar: true
});

// ignore a particular $http POST.  Note: POST and GET have different
// method signatures:
$http.post('/save', data, {
  ignoreLoadingBar: true
});

// ignore particular $resource requests:
app.factory('Restaurant', function($resource) {
  return $resource('/api/restaurant/:id', {id: '@id'}, {
    query: {
      method: 'GET',
      isArray: true,
      ignoreLoadingBar: true
    }
  });
});