Material design spinner - Angular 1 directive

spinner.css

/* MATERIAL DESIGN SPINNER, based on http://codepen.io/mrrocks/pen/EiplA

it relies on this SVG code
    <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
       <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </svg>
*/

/* PARAMETERS
    offset: 187;
    duration: 1.4s;
    duration-colors: 5.6s; (1.4s * 4)
 */

.spinner {
    animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #F7C223;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #4285F4;
  }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75; /* calc(187 / 4); */
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}

spinner.html

<!-- BASED ON http://codepen.io/mrrocks/pen/EiplA -->
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

spinner.js

// Spinner.js
// Directive encapsulating a material design spinner
// based on http://codepen.io/mrrocks/pen/EiplA

(function() {

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

    myApp.directive('Spinner', function() {
        return {
            restrict: 'E',
            templateUrl: 'spinner.html'
        };
    });

})();