From f65efd2e0f7193ca74c49aa7dd5b0cb21c3c8d0b Mon Sep 17 00:00:00 2001
From: apostolis <a.taxidaridis@gmail.com>
Date: Fri, 30 Oct 2015 13:49:19 +0200
Subject: [PATCH 1/3] Add prismatic animation

---
 sass/spinner/prismatic.scss | 38 +++++++++++++++++++++++++++++++++++++
 sass/spinners.scss          |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 sass/spinner/prismatic.scss

diff --git a/sass/spinner/prismatic.scss b/sass/spinner/prismatic.scss
new file mode 100644
index 0000000..206203d
--- /dev/null
+++ b/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%; }
+}
\ No newline at end of file
diff --git a/sass/spinners.scss b/sass/spinners.scss
index 4ae85db..2daad47 100644
--- a/sass/spinners.scss
+++ b/sass/spinners.scss
@@ -17,3 +17,4 @@
 @import "spinner/inner-circles";
 @import "spinner/pong";
 @import "spinner/pulse";
+@import "spinner/prismatic";
\ No newline at end of file

From 16734e8f761b45610c583d4a1f0869f19d206c36 Mon Sep 17 00:00:00 2001
From: apostolis <a.taxidaridis@gmail.com>
Date: Fri, 30 Oct 2015 13:50:19 +0200
Subject: [PATCH 2/3] Update markup

---
 examples.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples.html b/examples.html
index 03b8e4c..ae89d08 100644
--- a/examples.html
+++ b/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>

From 782972a91f46c3f13b3ad9473baf99ab8a8fb89b Mon Sep 17 00:00:00 2001
From: apostolis <a.taxidaridis@gmail.com>
Date: Fri, 30 Oct 2015 13:51:57 +0200
Subject: [PATCH 3/3] Update readme

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index cdf63fe..78e9d92 100644
--- a/README.md
+++ b/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