Angular: Empty Fiddle

http://angularjs.org/

by jlaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js"></script>
<div ng-controller="notificationsCtrl">Hello, {{name}}!
    <br>
    <button ng-click="maskMe()">mask Me</button>
    <div>HERE IS SOME CONTENT</div>
    <div loader="maskMe">this content will be masked and at least 100px; high</div>
    <notifications></notifications>
    <div>HERE IS SOME CONTENT</div>
</div>

CSS

.masked {
    position: relative;
    min-height:100px;
}
.masked:before {
    position:absolute;
    display:block;
    content:" ";
    width: 100%;
    height: 100%;
    background-color: rgba(70, 70, 70, 0.8);
    z-index:1;
}
.masked:after {
    position:absolute;
    content: attr(data-content);
    display:block;
    width: 100%;
    z-index:2;
    color: #ffF;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    text-align:center;
}
.centered {
    display:inline-block;
    text-align: center;
    width: 100%;
}

JavaScript

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

app.directive('notifications', ['$templateCache', function ($templateCache) {
    return {
        restrict: 'E',
        scope: {},
        template: $templateCache.get('notifications/notifications.tpl.html'),
        link: function (scope, ele, attrs) {

        }
    };
}])
    .directive('loader', function () {
    return {
        template: '<div ng-transclude></div>',
        transclude: true,
        restrict: 'A',
        scope: {
            loader: '@loader'
        },
        link: function postLink(scope, element, attrs) { /*jshint unused:false*/
            scope.loading = false;
            var timer;
            var elips = 0
            var getElipses = function (msg) {
                switch (elips) {
                    case 0:
                        elips++;
                        return msg + '.\00 \00  \00   \00   \00 ';
                        break;
                    case 1:
                        elips++;
                        return msg + '.. \00 \00 \00 ';
                        break;
                    case 2:
                        elips = 0;
                        return msg + '...  \00   \00 ';
                        break;
                }
            }
            scope.$on('$LOAD', function (event, value, msg) {
                console.log(scope.loader);
                if (value === scope.loader) {
                    elips = 0;
                    element.addClass('masked');
                    timer = setInterval(function (counter) {
                        element.attr('data-content', getElipses(msg));
                    }, 500);
                }
            });
            scope.$on('$UNLOAD', function (event, value, msg) {
                if (value === scope.loader) {
                    element.removeClass('masked');
                    clearInterval(timer);
                }
            });
        }
    };
})
    .factory('notificationsFactory', ['$q',...