SVG Indeterminate Progress Element

A cross browser compatible version approximating IE11's own progress element.

HTML

<div id="container" ng-app="myApp">
    <script type="text/ng-template" id="indeterminateProgress.html">
        <svg ng-style="{maxHeight:SVG.width}">
            <rect x="0" y="0" width="{{SVG.width}}px" opacity="0" height="{{SVG.width}}px" rx="{{SVG.radius}}" ry="{{SVG.radius}}" ng-repeat="rect in SVG.rects track by $index">
                <animate attributeName="x"
                    from          = "0"
                    to            = "100%"
                    begin         = "{{SVG.calculateBegin($index, SVG.duration, SVG.rects.length, SVG.delayOffset)}}"
                    dur           = "{{SVG.duration}}"
                    fill          = "freeze"
                    calcMode      = "spline"
                    keySplines    = "{{SVG.keySplines[0]}}, {{SVG.keySplines[1]}}, {{SVG.keySplines[2]}}, {{SVG.keySplines[3]}}"
                    keyTimes      = "0;1"
                    repeatCount   = "indefinite"
                ></animate>
                <animate 
                    attributeName = "opacity" 
                    values        = "0;1;1;0"
                    begin         = "{{SVG.calculateBegin($index, SVG.duration, SVG.rects.length, SVG.delayOffset)}}"
                    dur           = "{{SVG.duration}}"
                    keyTimes      = "0;0.25;0.75;1"
                    repeatCount   = "indefinite"
                ></animate>
            </rect>
        </svg> 
    </script>
    <div ng-controller="Ctrl as SVG">
            <indeterminate-progress  ng-if="SVG.showFull"></indeterminate-progress>
            </div>

CSS

svg, #container{
    width: 100%;
}
form {
    margin-top:2em;
}
code {
    display:inline-block;
    width:180px;
}
.half-width {
    width:50%;
}

JavaScript

var myApp = angular.module("myApp", []);
myApp.directive("indeterminateProgress", function() {
    return {
        templateUrl: "indeterminateProgress.html",
        restrict: 'E',
        replace: true
    }
});
function Ctrl ($scope) {
    this.showFull = true;
    this.showHalf = false;
    this.showMany = false;
    this.formHidden = true;
    this.duration = 4;
    this.delayOffset = -0.5;
    this.rects = [0,1,2,3,4];
    this.keySplines = [0.2, 0.8, 0.8, 0.2];
    this.radius = 3;
    this.width = 6;
    this.calculateBegin = function calculateBegin (index, duration, rectsLength, delayOffset) {
        var begin = (index * ((duration/rectsLength) + parseFloat(delayOffset)));
        return begin;
    };   
    // Don't lecture me about DOM manip in a controller, I know what I'm doing
    this.reset = function reset () {
        var $timeout = angular.element(document.getElementById("container")).injector().get("$timeout");
        $scope.SVG.rects = [];            
        $timeout(function(){
            $scope.SVG.rects = [0,1,2,3,4];
        });
    };
}