Add SCSS source

md-preloader.scss

@@ -0,0 +1,70 @@
+/**
+ * Google Material Design Preloader
+ *
+ * CSS animated SVG implementation of the Google Material Design preloader
+ *
+ * Reference: http://goo.gl/ZfulRH
+ * License: MIT
+ * Author: Rudi Theunissen (rudolf.theunissen$gmail.com)
+ * Version: 1.1.1
+ */
+.md-preloader {
+  $easing:      cubic-bezier(.8,.0,.4,.8);
+
+  $speed:      1320ms;       // animation time for each loop
+  $color:      #448AFF;      // Blue A200 in the Material Design color palette
+  $linecap:    square;       // could be 'round', but the official one is square
+  $loops:      5;            // number of points where the arc meets
+  $arc:        0.72;         // fraction of the circumference that the arc grows to
+  $perimeter:  67px * pi();  // circumference of the raw svg inner cricle
+
+  // measure to prevent inline block spacing from affecting the outer rotation
+  font-size: 0;
+
+  display: inline-block;
+  animation: outer $speed * $loops linear infinite;
+
+  svg {
+    animation: inner $speed linear infinite;
+
+    circle {
+      fill: none;
+      stroke: $color;
+      stroke-linecap: $linecap;
+      animation: arc $speed $easing infinite;
+    }
+  }
+
+  @keyframes outer {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes inner {
+    0% {
+      transform: rotate(-360deg * (1 - $arc));
+    }
+    100% {
+      transform: rotate(0);
+    }
+  }
+
+  @keyframes arc {
+    0% {
+      stroke-dasharray: 1 $perimeter;
+      stroke-dashoffset: 0;
+    }
+    40% {
+      stroke-dasharray: $arc * $perimeter, $perimeter;
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dasharray: 1 $perimeter;
+      stroke-dashoffset: -$arc * $perimeter;
+    }
+  }
+}