Progress bar, v1.1.5

by Zaiste

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-show="ready != 100">
    <div class="progress large-6 success round"> <span class="meter" style="width: {{ready}}%"></span>

         <h1>Loading...</h1>
    </div>
</div>
<div ng-show="ready === 100">
     <h1>Ready</h1>

</div>

JavaScript

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

app.controller('Ctrl', function ($scope, $location, $timeout) {
    $scope.ready = 10;
    $scope.foo = function () {
        timeoutId = $timeout(function () {
            if ($scope.ready === 100) {
                $timeout.cancel(timeoutId);
            } else {
                $scope.ready += 10;
                $scope.foo();
            }
        }, 1000);
    }
    $scope.foo();
});


app.directive('meter', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            $(element).width(scope.ready + '%');
        }
    };
});