Add prismatic loader

README.md

@@ -63,6 +63,7 @@ The full list of loading indicator class names are shown below. To see them in a
 | .inner-circles-loader  | A filling circle with other circles                            |
 | .pong-loader           | Retro tennis-like game simulation from the 70s.                |
 | .pulse-loader          | A pulsing circle. Shrinking and enlarging.										  |
+| .prismatic-loader      | Prismatic's website loader animation								            |
 
 
 Customize with Sass

examples.html

@@ -137,7 +137,7 @@
         <span class="hexdots-loader">Loading&#8230;</span>
       </div>
     </div>
-    
+
     <div class="cell">
       <div class="card">
         <span class="inner-circles-loader">Loading&#8230;</span>
@@ -156,6 +156,12 @@
       </div>
     </div>
 
+    <div class="cell">
+      <div class="card">
+        <span class="prismatic-loader">Loading&#8230;</span>
+      </div>
+    </div>
+
   </div>
 
 </body>

sass/spinner/prismatic.scss

@@ -0,0 +1,38 @@
+@import "compass/css3";
+
+$background-color: #ddd !default;
+$border: 5px solid #fff !default;
+$element-width: 50px !default;
+$element-height: 50px !default;
+$prismatic-loader-speed: 1s !default;
+
+.prismatic-loader:not(:required) {
+  width: $element-width;
+  height: $element-height;
+  @include border-radius(50%);
+  background: $background-color;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  text-indent: -99999px;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    background: $background-color;
+    border: $border;
+    @include border-radius(50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    @include transform(translate3d(-50%, -50%, 0));
+    @include animation(prismatic-loader $prismatic-loader-speed infinite);
+  }
+}
+
+@include keyframes(prismatic-loader) {
+  from { width: 0; height: 0; }
+  to { height: 100%; width: 100%; }
+}

sass/spinners.scss

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