Spinner Loader AngularJS Directive Sample

var app = angular.module('loaderDirectiveSample', []);

app.controller('MainCtrl', function($scope) {

});

<!DOCTYPE html>
<html ng-app="loaderDirectiveSample">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

  <link rel="stylesheet" href="style.css" />

  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>

  <script src="app.js"></script>
  <script src="spinnerLoader.js"></script>

</head>

<body ng-controller="MainCtrl">

  <h2>Spinner Loader AngularJS Directive Sample</h2>

  <hr/>
   
    <spinner-loader sl-visible="true" sl-size="tiny"></spinner-loader>
  
  <br/><br/>
  
  
    <spinner-loader sl-visible="true" sl-size="small"></spinner-loader>
  
  <br/><br/><br/>
  
    <spinner-loader sl-visible="true" sl-size="medium"></spinner-loader>
  
  <br/><br/><br/><br/>
  
    <spinner-loader sl-visible="true" sl-size="large"></spinner-loader>
  
  <br/><br/><br/><br/>
  

</body>

</html>

.spinnerLoad {
    -webkit-animation: spinner_anim 0.5s infinite steps(12);
    -webkit-transform-origin: 0.10em 0.9em;
    -ms-animation: spinner_anim 1s infinite steps(12);
    -ms-transform-origin: 0.10em 0.9em;
}
.tinySize {
    font-size: 10px;
}
.smallSize {
    font-size: 15px;
}
.mediumSize {
    font-size: 25px;
}
.largeSize {
    font-size: 40px;
}
.bar {
    position: absolute;
    width: .21em;
    height: .5em;
    background: #ff0000;
    -webkit-border-radius: .2em;
    -webkit-transform-origin: 0.1em 0.9em;
    -ms-border-radius: .2em;
    -ms-transform-origin: 0.1em 0.9em;
}
#stepOne {
    background: #ddd;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}
#stepTwo {
    background: #ccc;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
}
#stepThree {
    background: #bbb;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
}
#stepFour {
    background: #aaa;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
#stepFive {
    background: #999;
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
}
#stepSix {
    background: #888;
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
}
#stepSeven {
    background: #777;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}
#stepEight {
    background: #666;
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
}
#stepNine {
    background: #555;
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
}
#stepTen {
    background: #444;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
}
#stepEleven {
    background: #333;
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
}
#stepTvelve {
    background: #222;
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
}
@-webkit-keyframes spinner_anim {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-ms-keyframes spinner_anim {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
    }
}

/*global angular*/
angular.module("loaderDirectiveSample").directive('spinnerLoader', function() {
    'use strict';

    return {
        restrict: 'EA',
        scope: {
            slVisible: '=',
            slSize: '='
        },
        template:
            '<div class="spinnerLoad">' +
                '<div id="stepOne"    class="bar"></div>' +
                '<div id="stepTwo"    class="bar"></div>' +
                '<div id="stepThree"  class="bar"></div>' +
                '<div id="stepFour"   class="bar"></div>' +
                '<div id="stepFive"   class="bar"></div>' +
                '<div id="stepSix"    class="bar"></div>' +
                '<div id="stepSeven"  class="bar"></div>' +
                '<div id="stepEight"  class="bar"></div>' +
                '<div id="stepNine"   class="bar"></div>' +
                '<div id="stepTen"    class="bar"></div>' +
                '<div id="stepEleven" class="bar"></div>' +
                '<div id="stepTvelve" class="bar"></div>' +
            '</div>',
        link: function (scope, element, attrs) {
          
          var parent = element[0].parentNode;
            
            /* Will handle visibility changes */
            scope.$watch(attrs.slVisible, function () {
              
                //element[0].style.position    = 'fixed';
                element[0].style.marginTop  = (parent.offsetHeight / 4.5) + 'px';
                element[0].style.marginLeft = (parent.offsetWidth / 2.3) + 'px';

                element.css('display', scope.slVisible ? 'block' : 'none');
            });

            /* Will handle the Size */
            scope.$watch(attrs.slSize, function () {
                if (attrs.slSize) {
                    element[0].className = attrs.slSize.toLowerCase() + 'Size';
                }
            });

        }
    };
});