update loading element

3 files changed, 27 insertions, 23 deletions

diff --git a/src/buttons.less b/src/buttons.less
index 0c2a7f3..5fd5c80 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -31,29 +31,6 @@
     background-color: darken(@core-color, 5%);
   }
 
-  &.loading {
-    color: transparent !important;
-    position: relative;
-    pointer-events: none;
-
-    &::after {
-      border: .2rem solid @core-color;
-      border-right-color: transparent;
-      border-top-color: transparent;
-      border-radius: .8rem;
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -.8rem;
-      margin-top: -.8rem;
-      display: block;
-      width: 1.6rem;
-      height: 1.6rem;
-      animation: loading 500ms infinite linear;
-    }
-  }
-
   &[disabled],
   .disabled {
     opacity: .5;
diff --git a/src/navigation.less b/src/navigation.less
index 9b828ff..f823210 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -77,3 +77,5 @@
     }
   }
 }
+// TODO: Pagination
+
diff --git a/src/utilities.less b/src/utilities.less
index ded95e7..a088eb0 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -160,6 +160,31 @@
   border-radius: 50%;
 }
 
+// Loading
+.loading {
+  min-height: 1.6rem;
+  color: transparent !important;
+  position: relative;
+  pointer-events: none;
+
+  &::after {
+    border: .2rem solid @core-color;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    border-radius: .8rem;
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -.8rem;
+    margin-top: -.8rem;
+    display: block;
+    width: 1.6rem;
+    height: 1.6rem;
+    animation: loading 500ms infinite linear;
+  }
+}
+
 // Animations
 @keyframes loading {
   0%{transform: rotate(0deg);}