From c2c891caa9c8157dd025d7b9a0614a746c063339 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 14 Oct 2014 15:59:31 -0400
Subject: [PATCH] Fixes #765, moves loading state to css only

---
 src/definitions/elements/button.less          | 75 +++++++++++--------
 .../default/elements/button.variables         | 12 ++-
 2 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index 36a7af702..ac133b2e5 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -129,31 +129,67 @@
     Loading
 ---------------*/
 
-.ui.loading.button {
+/* Specificity hack */
+.ui.loading.loading.loading.loading.loading.loading.button {
   position: relative;
   cursor: default;
   point-events: none;
-
-  background: @loadingBackground !important;
   text-shadow: none !important;
   color: transparent !important;
   transition: all 0s linear;
-  box-shadow: @boxShadow;
+}
+.ui.loading.button:before {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  border-radius: @circularRadius;
+  border: @loaderLineWidth solid @loaderFillColor;
 }
 .ui.loading.button:after {
   position: absolute;
-  top: 0em;
-  left: 0em;
-  width: 100%;
-  height: 100%;
   content: '';
-  background: transparent url(@loaderPath) no-repeat 50% 50%;
+  top: 50%;
+  left: 50%;
+
+  margin: @loaderMargin;
+  width: @loaderSize;
+  height: @loaderSize;
+
+  animation: button-spin @loaderSpeed linear;
+  animation-iteration-count: infinite;
+
+  border-radius: @circularRadius;
+
+  border-color: @loaderLineColor transparent transparent;
+  border-style: solid;
+  border-width: @loaderLineWidth;
+
+  box-shadow: 0px 0px 0px 1px transparent;
 }
 .ui.labeled.icon.loading.button .icon {
   background-color: transparent;
   box-shadow: none;
 }
 
+@keyframes button-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ui.basic.loading.button:not(.inverted):after {
+  border-color: @invertedLoaderLineColor transparent transparent;
+}
+
 /*-------------------
       Disabled
 --------------------*/
@@ -556,22 +592,6 @@
   font-size: @massive;
 }
 
-/* Loading Resize */
-.ui.huge.loading.button:after,
-.ui.huge.loading.button.active:after {
-  background-image: url(@hugeLoaderPath);
-}
-.ui.massive.buttons .loading.button:after,
-.ui.gigantic.buttons .loading.button:after,
-.ui.massive.loading.button:after,
-.ui.gigantic.loading.button:after,
-.ui.massive.buttons .loading.button.active:after,
-.ui.gigantic.buttons .loading.button.active:after,
-.ui.massive.loading.button.active:after,
-.ui.gigantic.loading.button.active:after {
-  background-image: url(@massiveLoaderPath);
-}
-
 /*--------------
     Icon Only
 ---------------*/
@@ -677,11 +697,6 @@
   box-shadow: @basicInvertedHoverBoxShadow !important;
 }
 
-/* Loading */
-.ui.basic.loading.button:after {
-  background-color: @basicLoadingColor;
-  border-radius: @borderRadius;
-}
 
 /* Basic Group */
 .ui.basic.buttons .button {
diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables
index 294092b44..9ac66a01f 100755
--- a/src/themes/packages/default/elements/button.variables
+++ b/src/themes/packages/default/elements/button.variables
@@ -48,9 +48,15 @@
 @iconVerticalAlign: baseline;
 
 /* Loader */
-@loaderPath: "@{imagePath}/loader-mini.gif";
-@hugeLoaderPath: "@{imagePath}/loader-small.gif";
-@massiveLoaderPath: "@{imagePath}/loader-medium.gif";
+@loaderSize: 1.2857em;
+@loaderOffset: -(@loaderSize / 2);
+@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
+@loaderLineWidth: 3px;
+@loaderSpeed: 0.75s;
+
+@loaderFillColor: rgba(0, 0, 0, 0.15);
+@loaderLineColor: rgba(255, 255, 255, 0.8);
+@invertedLoaderLineColor: @darkGrey;
 
 @transition:
   opacity 0.1s @transitionEasing,