LoadingSpinner: Use CSS based spinner animation

Author: Turbo87

app/components/loading-spinner.hbs

@@ -1,6 +1,6 @@
-<img
-  src="/assets/ajax-loader.gif"
-  alt="Loading Spinner"
+<div
+  title="Loading Spinner"
   local-class="spinner"
   ...attributes
 >
+</div>

app/components/loading-spinner.module.css

@@ -1,4 +1,29 @@
 .spinner {
+    --spinner-color: black;
+    --spinner-bg-color: rgba(0, 0, 0, .2);
+
+    display: inline-block;
     height: 16px;
     width: 16px;
+
+    &:after {
+        content: " ";
+        display: block;
+        box-sizing: border-box;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        border: 3px solid var(--spinner-color);
+        border-color: var(--spinner-bg-color) var(--spinner-bg-color) var(--spinner-color) var(--spinner-bg-color);
+        animation: spinner 1.2s linear infinite;
+    }
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }