mendaomn · January 18, 2016 12:03 · Jan 18, 2016
diff --git a/spinner.css b/spinner.css
@@ -0,0 +1,65 @@
+/* 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);
+    }
+}
diff --git a/spinner.html b/spinner.html
@@ -0,0 +1,4 @@
+<!-- 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>
diff --git a/spinner.js b/spinner.js
@@ -0,0 +1,16 @@
+// 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'
+        };
+    });
+
+})();