ngLoading

A simple and automatic way to add custom loading animations to your angular apps.

Demo Site

Preview ngLoading in action here.

Dependencies

• Angular.js (1.2+)
• lodash

Downloading

1. The best way to install ngLoading is to use bower
   • bower install ng-loading --save
2. Or, from this repo

• you'll need the main file in dist/

Using

• Adding a loading animation is as simple as adding the ngLoading dependency to your main angular module. ngLoading will listen to any http request made from your application and show the animation. Then, when your application recieves the http response, it will remove the animation.

angular.module('myApp', ['ngLoading']);

• ngLoading can also be customized a few different ways to show your own animations. Configure ngLoading globally by adding a configuration object into the loadingProvider.

angular.module('myApp', ['ngLoading']) .config(function(loadingProvider) {   loadingProvider     .load({       transitionSpeed: .3s, //default       class: 'your_css_class', //default is the 'load-bar-inbox' class, another option is the 'spinner' class         overlay: {           display: true, //required to apply an overlay           color: #FEFEFE, //default           opacity: .3 //default         }     }); });

• or configure the loading animation for each individual http request

$http({   loadingConfig: {     transitionSpeed: '.3s', //default     overlay: {       display: true, //required to apply an overlay       color: #FEFEFE, //default       opacity: .3 //default     }   } })

Icons

• Currently ngLoading supports all 3rd party icons. To add an icon, just add the icon property to your configuration object.

{   transitionSpeed: '.3s', //default   icon: 'fa fa-spin fa-spinner fa-5x',   overlay: {     display: true, //required to apply an overlay     color: #FEFEFE, //default     opacity: .3 //default   } }

My app doesn't use http?!

• ngLoading can also be triggered from anywhere inside your angular app.

.controller('MyController', function(Interceptor) {     //trigger the loading screen to start     Interceptor.start();      //trigger it to end     Interceptor.end(); });

##Contributing

1. Fork it
2. Clone your fork
3. Create new branch
4. Make changes
5. Make test and check test
6. Build it, run gulp and the files will be linted, concatenated, and minified
7. Push to new branch on your forked repo
8. Pull request from your branch to ngLoading master

###Format for pull request

• Pretty standard
  • in your commit message; (type) message [issue # closed]
    • (bug) killed that bug, closes #45
• Submit issues as you see them. There are probably better, faster, easier ways to achieve what ngLoading is designed to do so.

###Testing

• ngLoading uses Karma + Mocha + Travis for unit and ci
• Make sure you didn't break anything
  • run karma start to test in Chrome with karma
• Features will not be accepted without specs created for them
• Run gulp watch and all the source files will be watched and concatenated
• Open the index.html and use the test app as a playground