Show busy/loading indicators on any element during $http requests (or any promise).

This library depends on Andy Joslin's angular-promise-tracker.

Annotate an $http request using angular-promise-tracker and add cg-busy on an element to display a busy indication on a specific element during the $http request.

This library builds on Angular 1.2 and the new Angular animate module in animate.js.

Supports IE 10, and recent versions of FF and Chrome.

Live Demo

Add dist/angular-busy.js and dist/angular-busy.css to your index.html. Also add the angular-promise-tracker files as necessary.

Add cgBusy as a module dependency for your module (in addition to ajoslin.promise-tracker and the Angular 1.2 ngAnimate module):

angular.module('your_app', ['ngAnimate','ajoslin.promise-tracker','cgBusy']);

Add the promise trackers as you normally would using angular-promise-tracker:

function MyCtrl($scope) {

  $scope.pizzaFlavor = $http.get('/pizzaFlavor', { tracker: 'pizza' });
  
}

Add cg-busy to the elements you wish to be busy during those requests:

<div cg-busy="'pizza'"></div>

The cg-busy directive expects a value that is interpreted as an expression. The value may be specified as an object literal or simply as a string if only the tracker value is provided.

In other words. You may do this:

<div cg-busy="'my_tracker'"></div> <!-- Notice the extra single quotes because its an expression -->

or this:

<div cg-busy="{tracker:'my_tracker',backdrop:false,template:'myAwesomeTemplate.html'}"></div>

• tracker - Required. The name of the promise tracker.
• backdrop - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.
• template - Optional. If provided, the given template will be shown in place of the default progress indicatory template. Use this to override the default UI and provide your own.

The default progress template shows a spinner and a 'Please Wait...' message. But you can define custom templates per instance (as shown above) or change the global default template. To change the global default template just provide a new $injector value for cgBusyTemplateName. Ex:

angular.module('yourapp').value('cgBusyTemplateName','your_custom_template_here.html');

Templates are full, normal Angular partials with access to the scope of where the cg-busy was used.

• v2.0.0 - Moved to Angular 1.2.0-rc1.
• v1.0.0 - Added Bower support.
• v0.1.1 - Updated to Angular 1.1.5 animation syntax.
• v0.1.0 - Initial release.