Show busy/loading indicators on any element during $http requests (or any promise).
This library depends on Andy Joslin's angular-promise-tracker.
$http request using
angular-promise-tracker and add
cg-busy on an element to display a busy
indication on a specific element during the
This library builds on Angular 1.2 and the new Angular animate module in
Supports IE 10, and recent versions of FF and Chrome.
dist/angular-busy.css to your index.html. Also add the
angular-promise-tracker files as necessary.
cgBusy as a module dependency for your module (in addition to
ajoslin.promise-tracker and the Angular 1.2
Add the promise trackers as you normally would using
cg-busy to the elements you wish to be busy during those requests:
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:
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
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.