Fix: Loading animation updated (fixes #500) (#501)

less/_defaults/_animations.less

@@ -121,3 +121,15 @@
   .animation(bounceRightOnce 0.5s 0s 1 normal ease-in-out none);
   // name, duration, delay, iteration count, direction, timing-function, fill mode
 }
+
+// 360 spin animation
+// --------------------------------------------------
+.effect-spin() {
+  .keyframes(spin; {
+    0% { transform: rotateZ(0); }
+    100% { transform: rotateZ(360deg); }
+  });
+
+  .animation(spin 1s 0s infinite normal ease-in-out none);
+  // name, duration, delay, iteration count, direction, timing-function, fill mode
+}

less/_defaults/_colors.less

@@ -195,3 +195,8 @@
 @shadow: @black;
 @shadow-inverted: @white;
 @shadow-opacity: 50%;
+
+// Loading
+// --------------------------------------------------
+@loading: @black;
+@loading-inverted: @white;

less/core/loading.less

@@ -1,54 +1,18 @@
-@loading-anim-delay: 0.16s;
-
 .loading {
   background-color: fade(@shadow, @shadow-opacity);
   color: @shadow-inverted;
 
-  &__inner,
-  &__inner:before,
-  &__inner:after {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    animation-fill-mode: both;
-    animation: loading 1.25s infinite ease-in-out;
-  }
-
   &__inner {
-    position: absolute;
-    top: 51%;
-    left: 0;
-    right: 0;
-    margin: auto;
+    .l-fill-viewport-absolute;
     text-indent: -9999rem;
-    animation-delay: -@loading-anim-delay;
-    .transform(translateZ(0));
-  }
-
-  &__inner:before,
-  &__inner:after {
-    content: "";
-    position: absolute;
-    top: 0;
-  }
-
-  &__inner:before {
-    left: -3rem;
-    animation-delay: -@loading-anim-delay * 2;
-  }
-
-  &__inner:after {
-    left: 3rem;
   }
-}
 
-@keyframes loading {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 2.5rem 0 -1.3rem;
-  }
-  40% {
-    box-shadow: 0 2.5rem 0 0;
+  &__inner {
+    width: 3rem;
+    height: 3rem;
+    border: .25rem solid fade(@loading, 50%);
+    border-top-color: @loading-inverted;
+    border-radius: 50%;
+    .effect-spin;
   }
 }

properties.schema

@@ -710,6 +710,19 @@
             "inputType": "ColourPicker",
             "default": "",
             "help": "Defines the Shadow text / icon colour. Should be a colour that provides good contrast against the Shadow colour."
+          },
+          "loading": {
+            "title": "Loading animation background colour",
+            "type": "string",
+            "inputType": "ColourPicker",
+            "default": ""
+          },
+          "loading-inverted": {
+            "title": "Loading animation colour - inverted",
+            "type": "string",
+            "inputType": "ColourPicker",
+            "default": "",
+            "help": "Defines the loading animation bar colour. Should be a colour that provides good contrast against the loading colour."
           }
         }
       }

schema/theme.schema.json

@@ -698,6 +698,19 @@
           "description": "Defines the shadow text/icon colour. Should be a colour that provides good contrast against the shadow colour",
           "default": "",
           "_backboneForms": "ColourPicker"
+        },
+        "loading": {
+          "type": "string",
+          "title": "Loading animation background colour",
+          "default": "",
+          "_backboneForms": "ColourPicker"
+        },
+        "loading-inverted": {
+          "type": "string",
+          "title": "Loading animation colour - inverted",
+          "description": "Defines the loading animation bar colour. Should be a colour that provides good contrast against the loading colour",
+          "default": "",
+          "_backboneForms": "ColourPicker"
         }
       }
     }