From 2c3d887191ab43cf7cf4a52489c0219fa0d573fd Mon Sep 17 00:00:00 2001
From: Hans Christian Reinl <info@drublic.de>
Date: Tue, 6 Jan 2015 23:21:07 +0100
Subject: [PATCH] Include a build of the spinner CSS

---
 CHANGELOG.md               |  1 +
 build/modal-spinner.css    | 97 +++++++++++++++++++++++++++++---------
 plugins/modal-spinner.scss |  4 ++
 3 files changed, 80 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7133782..5c03f1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## HEAD
+* Include a build of the spinner CSS
 * Include a modal--fade by default to the output
 * Bugfix: Use jQuery to subscribe to events to prevent errors with trigger
 * Update word break property of modal content
diff --git a/build/modal-spinner.css b/build/modal-spinner.css
index c997259..648f135 100644
--- a/build/modal-spinner.css
+++ b/build/modal-spinner.css
@@ -12,41 +12,94 @@
   0% {
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
+    transform: rotate(0deg); }
   100% {
     -webkit-transform: rotate(1080deg);
     -ms-transform: rotate(1080deg);
-    transform: rotate(1080deg);
-  }
-}
+    transform: rotate(1080deg); } }
 @-webkit-keyframes rotate-outer {
   0% {
-    -webkit-transform: rotate(0deg);
-  }
+    -webkit-transform: rotate(0deg); }
   100% {
-    -webkit-transform: rotate(1080deg);
-  }
-}
+    -webkit-transform: rotate(1080deg); } }
 @keyframes rotate-inner {
   0% {
     -webkit-transform: rotate(720deg);
     -ms-transform: rotate(720deg);
-    transform: rotate(720deg);
-  }
+    transform: rotate(720deg); }
   100% {
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-}
+    transform: rotate(0deg); } }
 @-webkit-keyframes rotate-inner {
   0% {
-    -webkit-transform: rotate(720deg);
-  }
+    -webkit-transform: rotate(720deg); }
   100% {
-    -webkit-transform: rotate(0deg);
-  }
-}
-
-/*# sourceMappingURL=modal-spinner.css.map */
+    -webkit-transform: rotate(0deg); } }
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 64px;
+  height: 64px;
+  margin-top: -32px;
+  margin-left: -32px; }
+  .spinner .spinner__outer,
+  .spinner .spinner__inner, .spinner:after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0; }
+  .spinner:after {
+    content: '';
+    margin: 5%;
+    border-radius: 100%;
+    background: #fff; }
+  .spinner .spinner__outer,
+  .spinner .spinner__inner {
+    -webkit-animation-duration: 4s;
+    animation-duration: 4s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear; }
+    .spinner .spinner__outer:before, .spinner .spinner__outer:after,
+    .spinner .spinner__inner:before,
+    .spinner .spinner__inner:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0; }
+    .spinner .spinner__outer:before,
+    .spinner .spinner__inner:before {
+      left: 0;
+      right: 50%;
+      border-radius: 64px 0 0 64px; }
+    .spinner .spinner__outer:after,
+    .spinner .spinner__inner:after {
+      left: 50%;
+      right: 0;
+      border-radius: 0 64px 64px 0; }
+  .spinner .spinner__outer {
+    -webkit-animation-name: rotate-outer;
+    animation-name: rotate-outer; }
+  .spinner .spinner__inner {
+    -webkit-animation-name: rotate-inner;
+    animation-name: rotate-inner; }
+  .spinner .spinner__outer:before {
+    background-image: -webkit-linear-gradient(top, rgba(150, 150, 150, 0), rgba(150, 150, 150, 0.5));
+    background-image: -moz-linear-gradient(top, rgba(150, 150, 150, 0), rgba(150, 150, 150, 0.5));
+    background-image: linear-gradient(to bottom, rgba(150, 150, 150, 0), rgba(150, 150, 150, 0.5)); }
+  .spinner .spinner__outer:after {
+    background-image: -webkit-linear-gradient(top, #969696, rgba(150, 150, 150, 0.5));
+    background-image: -moz-linear-gradient(top, #969696, rgba(150, 150, 150, 0.5));
+    background-image: linear-gradient(to bottom, #969696, rgba(150, 150, 150, 0.5)); }
+  .spinner .spinner__inner:before {
+    background-image: -webkit-linear-gradient(top, rgba(150, 150, 150, 0.5), rgba(200, 200, 200, 0.5));
+    background-image: -moz-linear-gradient(top, rgba(150, 150, 150, 0.5), rgba(200, 200, 200, 0.5));
+    background-image: linear-gradient(to bottom, rgba(150, 150, 150, 0.5), rgba(200, 200, 200, 0.5)); }
+  .spinner .spinner__inner:after {
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(200, 200, 200, 0.5));
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(200, 200, 200, 0.5));
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(200, 200, 200, 0.5)); }
diff --git a/plugins/modal-spinner.scss b/plugins/modal-spinner.scss
index d932c25..3421bc5 100644
--- a/plugins/modal-spinner.scss
+++ b/plugins/modal-spinner.scss
@@ -146,3 +146,7 @@ $spinner--width: 5%;
 		background-image:         linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(200, 200, 200, 0.5));
 	}
 }
+
+.spinner {
+	@extend %spinner;
+}