Home

Awesome

angular-busy Build Status

Show busy/loading indicators on any $http or $resource request, or on any promise.

Demo

Live Demo

Getting Started

Install with Bower, npm, yarn, or download the files directly from the dist folder in the repo.

bower install angular-busy --save
npm install @cgross/angular-busy

Add dist/angular-busy.js and dist/angular-busy.css to your index.html.

Add cgBusy as a module dependency for your module.

angular.module('your_app', ['cgBusy']);

Add your promise to $scope and reference that in the cg-busy directive:

function MyCtrl($scope,$http,User) {

  //using $http
  $scope.myPromise = $http.get('...');

  //if you have a User class based on $resource
  $scope.myPromise = User.$save();

}

<!-- Use the simple syntax -->
<div cg-busy="myPromise"></div>

<!-- Use the advanced syntax -->
<div cg-busy="{promise:myPromise,message:'Loading Your Data',templateUrl:'mycustomtemplate.html'}"></div>

Options

The cg-busy directive expects either a promise or a configuration object.

In other words. You may do this:

<div cg-busy="myPromise"></div>

or this:

<div cg-busy="{promise:myPromise,message:'Loading',backdrop:false,templateUrl:'myAwesomeTemplate.html',delay:300,minDuration:700}"></div>

Providing Custom Templates

The angular-busy indicator is a regular Angular template. The templates have access to the scope where cg-busy was declared so you may reference your local scope variables in your custom templates. Additionally, the scope is augmented with a $message field containing the indicator message text.

Overriding Defaults

The defaut values for message, backdrop, templateUrl, delay, and minDuration may all be overriden by overriding the $injector value for cgBusyDefaults, like so:

angular.module('your_app').value('cgBusyDefaults',{
  message:'Loading Stuff',
  backdrop: false,
  templateUrl: 'my_custom_template.html',
  delay: 300,
  minDuration: 700,
  wrapperClass: 'my-class my-class2'
});

Only the values you'd like overriden need to be specified.

Release History