Replace spin.js with a CSS-only loading spinner (#2764)

* Create CSS only loading indicator

* Core mods to fix Loading Indicator usage

* Remove extra whitespace

* Attrs interface extends ComponentAttrs and is exported

* Add doc block about custom styling

framework/core/less/common/Checkbox.less

@@ -15,13 +15,9 @@
     float: left;
     margin-left: -65px;
     margin-top: -4px;
-
-    .LoadingIndicator {
-      display: inline-block;
-      margin-left: 20px;
-    }
   }
 }
+
 .Checkbox--switch .Checkbox-display {
   width: 50px;
   height: 28px;
@@ -31,8 +27,28 @@
   background: @control-bg;
   .transition(background-color 0.2s);
 
+  .LoadingIndicator {
+    --size: 22px !important;
+
+    &-container {
+      height: 22px;
+    }
+  }
+
   .on& {
     background: #58a400;
+
+    .LoadingIndicator-container {
+      // Show loading indicator over the switch button
+      justify-content: flex-end;
+    }
+  }
+
+  .off& {
+    .LoadingIndicator-container {
+      // Show loading indicator over the switch button
+      justify-content: flex-start;
+    }
   }
 
   &:before {

framework/core/less/common/LoadingIndicator.less

@@ -2,13 +2,58 @@
 // Loading Indicators
 
 .LoadingIndicator {
-  position: relative;
-  color: @muted-color;
+  @spin-time: 750ms;
+  --size: 24px;
+  --thickness: 2px;
+
+  &-container[data-size="large"] & {
+    --size: 32px;
+    --thickness: 3px;
+  }
+
+  &-container[data-size="tiny"] & {
+    --size: 18px;
+  }
+
+  // Use the value of `color` to maintain backwards compatibility
+  border-color: currentColor;
+  border-width: var(--thickness);
+  border-style: solid;
+  border-top-color: transparent;
+  border-radius: 50%;
+
+  width: var(--size);
+  height: var(--size);
+
+  animation: spin @spin-time linear infinite;
+
+  // <div> container around the spinner
+  // Used for positioning
+  &-container {
+    color: @muted-color;
+
+    // Center vertically and horizontally
+    // Allows people to set `height` and it'll stay centered within the new height
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--block {
+      height: 100px;
+    }
+
+    &--inline {
+      display: inline-block;
+    }
+  }
 }
-.LoadingIndicator--inline {
-  display: inline-block;
-  width: 25px;
-}
-.LoadingIndicator--block {
-  height: 100px;
+
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
 }

framework/core/less/forum/ActivityPage.less

@@ -2,7 +2,7 @@
   text-align: center;
   margin-top: 10px;
 
-  .LoadingIndicator {
+  .LoadingIndicator-container {
     height: 46px;
   }
 }

framework/core/less/forum/DiscussionList.less

@@ -10,9 +10,10 @@
 .DiscussionList-loadMore {
   text-align: center;
   margin-top: 10px;
-}
-.DiscussionList-loadMore .LoadingIndicator {
-  height: 46px;
+
+  .LoadingIndicator-container {
+    height: 46px;
+  }
 }
 
 @media @phone {