From 2c24965ebea05cf3fe8c8856ecd772ff825d6b29 Mon Sep 17 00:00:00 2001
From: Guy Willis <guywillis@users.noreply.github.com>
Date: Mon, 11 Mar 2024 18:00:41 +0000
Subject: [PATCH] Fix: Loading animation updated (fixes #500) (#501)

---
 less/_defaults/_animations.less | 12 ++++++++
 less/_defaults/_colors.less     |  5 ++++
 less/core/loading.less          | 52 +++++----------------------------
 properties.schema               | 13 +++++++++
 schema/theme.schema.json        | 13 +++++++++
 5 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/less/_defaults/_animations.less b/less/_defaults/_animations.less
index 9bbc0ed0..8491f320 100644
--- a/less/_defaults/_animations.less
+++ b/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
+}
diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less
index 674adf4f..c0117b8b 100644
--- a/less/_defaults/_colors.less
+++ b/less/_defaults/_colors.less
@@ -195,3 +195,8 @@
 @shadow: @black;
 @shadow-inverted: @white;
 @shadow-opacity: 50%;
+
+// Loading
+// --------------------------------------------------
+@loading: @black;
+@loading-inverted: @white;
diff --git a/less/core/loading.less b/less/core/loading.less
index 4c694ada..90006710 100644
--- a/less/core/loading.less
+++ b/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;
   }
 }
diff --git a/properties.schema b/properties.schema
index 3552183c..fe1bb4bc 100644
--- a/properties.schema
+++ b/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."
           }
         }
       }
diff --git a/schema/theme.schema.json b/schema/theme.schema.json
index 80a25982..ad3b7d28 100644
--- a/schema/theme.schema.json
+++ b/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"
         }
       }
     }