Add spinning-pixels loader

Import file intro spinners.scss

Author: Vangelis Tzortzis

sass/spinner/spinning-pixels.scss

@@ -0,0 +1,61 @@
+@import "compass/css3";
+
+$spinning-pixels-size: 10px !default;
+$spinning-pixels-color: #f35626 !default;
+$spinning-pixels-duration: 2s !default;
+
+/* :not(:required) hides this rule from IE9 and below */
+.spinning-pixels-loader:not(:required) {
+  @include animation(spinning-pixels $spinning-pixels-duration linear infinite);
+  width: $spinning-pixels-size;
+  height: $spinning-pixels-size;
+  background: $spinning-pixels-color;
+  @include box-shadow(
+    15px 15px  0 0 $spinning-pixels-color,
+    -15px -15px  0 0 $spinning-pixels-color,
+    15px -15px  0 0 $spinning-pixels-color,
+    -15px 15px  0 0 $spinning-pixels-color,
+    0 15px  0 0 $spinning-pixels-color,
+    15px 0  0 0 $spinning-pixels-color,
+    -15px 0  0 0 $spinning-pixels-color,
+    0 -15px 0 0 $spinning-pixels-color
+  );
+}
+
+@include keyframes(spinning-pixels) {
+  0%  {
+    -webkit-filter: hue-rotate(0deg);
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    @include box-shadow(
+      20px 20px  0 0 $spinning-pixels-color,
+      -20px -20px  0 0 $spinning-pixels-color,
+      20px -20px  0 0 $spinning-pixels-color,
+      -20px 20px  0 0 $spinning-pixels-color,
+      0 10px  0 0 $spinning-pixels-color,
+      10px 0  0 0 $spinning-pixels-color,
+      -10px 0  0 0 $spinning-pixels-color,
+      0 -10px 0 0 $spinning-pixels-color
+    );
+  }
+
+  75% {
+    @include box-shadow(
+      20px 20px  0 0 $spinning-pixels-color,
+      -20px -20px  0 0 $spinning-pixels-color,
+      20px -20px  0 0 $spinning-pixels-color,
+      -20px 20px  0 0 $spinning-pixels-color,
+      0 10px  0 0 $spinning-pixels-color,
+      10px 0  0 0 $spinning-pixels-color,
+      -10px 0  0 0 $spinning-pixels-color,
+      0 -10px 0 0 $spinning-pixels-color
+    );
+  }
+
+  100% {
+    @include transform(rotate(360deg));
+    -webkit-filter: hue-rotate(360deg);
+    filter: hue-rotate(360deg);
+  }
+}

sass/spinners.scss

@@ -17,3 +17,4 @@
 @import "spinner/inner-circles";
 @import "spinner/pong";
 @import "spinner/pulse";
+@import "spinner/spinning-pixels";