Angular+JQ+Bootstrap

by Bretto

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    <div dots>Loading</div>
    <div dots delay="500" count="6" char="-">Doing this thing</div>
</div>

JavaScript

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

app.directive('dots', function() {
    return function(scope, elm, attrs) {    
        var delay = +attrs.delay || 300;
        var count = +attrs.count || 3;
        var char = attrs.char || '.';        
        //put dots at the end of given element
        var $dots=$("<span>").appendTo(elm); 
        setInterval(function() {
            if ($dots.text().length < count) {
                $dots.append(char);
            } else {
                $dots.html('');
            }
        }, delay);    
    };
});
function MyCtrl($scope) {
    
}