Add three-dot style loader to specific elements that hold API loaded content

loader-dir.js

angular.module('app', [])
  .directive('loader', function() {
    return {
      restrict: 'A',
      link: function link(scope, element, attrs) {
        var loaderHTML = angular.element('<div class="loading-spinner-context"><div class="loading-spinner-wrapper"' + 'id="app-loader"><span class="loading-spinner white"><i class="one"></i><i class="two"></i><i class="three"></i></span></div></div>');
        scope.$watch(attrs.loader, function(newVal) {
          if (!newVal) {
            if ($(element).children('.loading-spinner-context').length) {
              $('.loading-spinner-context').css('display', 'block');
            } else {
              element.append(loaderHTML);
            }
            return;
          }
          $('.loading-spinner-context').fadeOut(600);
        });
      }
    };
  });

loader-style.sass

#app-loader
  top: 10%

.loading-spinner-context
  width: 100%
  background: #fff
  height: 100%
  position: absolute
  top: 0
  right: 0
  left: 0
  min-height: 400px
  z-index: 100

.loading-spinner.white i
  background: #1E2832

.content + .loading-spinner-context
  width: 100%
  display: none
  top: 0
// WIP