#CSS animated Angular loader directive

Install

• Bower

$ bower install angular-loader-directive --save

Include the javascript file:

• Use Wiredep

• Or include it manually:

<script src="bower_components/angular-loader-directive/dist/angular-loader.min.js"></script>

Include the CSS

• SASS :

    @import "../bower_components/angular-loader-directive/src/scss/loader";

    (and comment out the imports for the animations you will not use)

• HTML

    <link href="bower_components/angular-loader-directive/dist/styles/loader.css" rel="stylesheet">

##Use

• Inject the loader module into your app:

angular.module('myApp', ['eventures.loader']);

• Add the loader directive to your template

  <div loader="animation_name"></div>

• Override LoaderProvider's default interceptable url ('/api') and abeyance (200ms) as needed.

         myApp.run(function(loaderProvider) {
                    loaderProvider.setInterceptableURL('my_backend_url');
                    loaderProvider.setAbeyance(delay_before_animation_starts);
         })

###Available animations:

• box
• bounce
• cube
• spinner
• fold

Demo

CSS animations are thanks to:

• [tobiasahlin] (http://tobiasahlin.com/spinkit/)