Button loader directive for angular

That is just another directive to manage button loaders, useful for waiting times like ajax calls and so. Why create another directive fo this??? Because I have not find anyone as simple as I need or as customizable as I want, so I decided to create my own.

How to use it

Just like any other angular directive, include the "btnLoader" dependency on your Angular module:

var myapp = angular.module('MyApp', ['btnLoader'])

And then use the html attribute

<button btn-loader btn-condition="custom_condition">BUTTON</button>

Configuration options

The button loader is fully configurable from html attributes. Below you can see the list of configurable options:

btn-loader                          // Required to include the directive
btn-condition="custom_condition"    // Set the variable to change state
btn-keepsize="true"                 // Keep the same size in both states
ng-disabled="custom_condition"      // Add disable state
btn-include="'noTemplate.html'"     // Add custom template
btn-texts="{load:'Load', loading: 'loading...'}"                    // Fast customization for texts
btn-icons="{load:'fa fa-save', loading: 'fa fa-spinner fa-pulse'}"  // Fast customization for icons 
btn-color="'255,255,255'"           // Customize default spinner color ( '' are mandatory )

Events

If condition doesn't work before of the scopes issues you can forze it with an event passing the parameter "bool" (dafault false)

$scope.$broadcast('btn-loader', bool)

Custom Templates

Custom templates give you the oportunity to make your own button-loader fast and easily. Create a template with both states and wrap them into tags with "ng-hide='active'" and "ng-show='active'" like this:

<span ng-hide="active">
    <span>My custom text</span>
    <i>My custom icon</i>
</span>
<span ng-show="active">
    <span>My custom text for waiting state</span>
    <i>My custom icon for waiting state</i>
</span>

Examples

Default button:

code:
        <button btn-loader btn-condition="cond0"></button> 
        <button ng-click="cond0 = false">Stop spinner</button>

Bootstrap style button:

code:
        <button class="btn btn-primary" btn-loader btn-condition="cond1" btn-texts="{load:'Send', loading: 'Sending'}" btn-color="'255,255,255'" ng-disabled="cond1"></button> 
        <button class="btn btn-primary" ng-click="cond1 = false">Stop spinner</button>

FontAwesome style button:

code:
        <button class="btn btn-primary" btn-loader btn-condition="cond1" btn-texts="{load:'Send', loading: 'Sending'}" btn-icons="{load:'fa fa-save', loading:'fa fa-spinner fa-pulse'}"></button> 
        <button class="btn btn-primary" ng-click="cond1 = false">Stop spinner</button>

Custom template:

code:
        <button class="btn btn-primary" btn-loader btn-condition="cond2" btn-keepsize="true" btn-include="'example/custom_template.html'"></button> 
        <button class="btn btn-primary" btn-loader btn-condition="cond2" btn-include="'example/custom_template.html'"></button> 
        <button class="btn btn-primary" ng-click="cond2 = false">Stop spinner</button> 

Template:
        <style> 
          .spinner {
            width: 100%;
            text-align: center;
          }
          .spinner.gray > div {
            background-color: #808080;
          }
          .spinner > div {
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
          }
          .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
          }
          .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
          }
          @-webkit-keyframes sk-bouncedelay {
            0%, 80%, 100% {
              -webkit-transform: scale(0);
            }
            40% {
              -webkit-transform: scale(1);
            }
          }
          @keyframes sk-bouncedelay {
            0%, 80%, 100% {
              -webkit-transform: scale(0);
              transform: scale(0);
            }
            40% {
              -webkit-transform: scale(1);
              transform: scale(1);
            }
          }
        </style> 


        <div ng-show="active" class="spinner"> 
          <div class="bounce1"> </div> 
          <div class="bounce2"> </div> 
          <div class="bounce3"> </div> 
        </div>
        <span ng-hide="active" ng-bind="'SAVE'"></span> 
        <input type="submit" style="display:none"/>