Showing posts with label loading indicators. Show all posts
Showing posts with label loading indicators. Show all posts
Show busy/loading indicators on any element during $http requests (or any promise).

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

May 14, 2017

angular-busy


Show busy/loading indicators on any element during $http requests (or any promise). http://cgross.github.io/angular-busy/demo
 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>  
  • promise- Required. The promise (or array of promises) that will cause the busy indicator to show.
  • message- Optional. Defaults to 'Please Wait...'. The message to show in the indicator. This value may be updated while the promise is active. The indicator will reflect the updated values as they're changed.
  • backdrop - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.
  • templateUrl - Optional. If provided, the given template will be shown in place of the default progress indicatory template.
  • delay - Optional. The amount of time to wait until showing the indicator. Defaults to 0. Specified in milliseconds.
  • minDuration - Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker. Defaults to 0. Specified in milliseconds.
  • wrapperClass - Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy sign/animation. Defaults to cg-busy cg-busy-animation. Typically only useful if you wish to apply different positioning to the animation.
  • 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 default 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.

    Note: Special thanks to Chris Gross

    Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.