Show busy/loading indicators on any element during $http requests (or any promise).
37 people use it
Author: 132874? cgross

angular-busy Build Status

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

Getting Started

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):

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

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


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:

or this:

  • 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.

Providing Custom Templates

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:

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

Release History

  • 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.
comments powered by Disqus
This page was last updated almost 5 years ago.