💄 Add Wallpaper, Spinner and LoadingPage widgets

src/components/spinner.scss

@@ -0,0 +1,103 @@
+@import "../_base.scss"
+
+.root {
+    $background-height: 128px;
+    $background-width: 384px;
+    $logo-height: calc(32px * 2);
+    $logo-width: calc(64px * 2);
+
+    height: $logo-height;
+    width: $logo-width;
+
+    position: absolute;
+    z-index: 1;
+
+    $logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));
+
+    @media (0px < height <= calc($background-height * 5)) {
+        top: $logo-center-pos;
+    }
+    @media (calc($background-height * 5) < height <= calc($background-height * 6)) {
+        top: calc($logo-center-pos + ($background-height * 1));
+    }
+    @media (calc($background-height * 6) < height <= calc($background-height * 8)) {
+        top: calc($logo-center-pos + ($background-height * 2));
+    }
+    @media (calc($background-height * 8) < height <= calc($background-height * 10)) {
+        top: calc($logo-center-pos + ($background-height * 3));
+    }
+    @media (calc($background-height * 10) < height <= calc($background-height * 12)) {
+        top: calc($logo-center-pos + ($background-height * 4));
+    }
+    @media (calc($background-height * 12) < height <= calc($background-height * 14)) {
+        top: calc($logo-center-pos + ($background-height * 5));
+    }
+    @media (calc($background-height * 14) < height <= calc($background-height * 16)) {
+        top: calc($logo-center-pos + ($background-height * 6));
+    }
+    @media (calc($background-height * 16) < height <= calc($background-height * 18)) {
+        top: calc($logo-center-pos + ($background-height * 7));
+    }
+    @media (calc($background-height * 18) < height <= calc($background-height * 20)) {
+        top: calc($logo-center-pos + ($background-height * 8));
+    }
+    @media (calc($background-height * 20) < height <= calc($background-height * 22)) {
+        top: calc($logo-center-pos + ($background-height * 9));
+    }
+    @media (calc($background-height * 22) < height <= calc($background-height * 24)) {
+        top: calc($logo-center-pos + ($background-height * 10));
+    }
+    @media (calc($background-height * 24) < height <= calc($background-height * 26)) {
+        top: calc($logo-center-pos + ($background-height * 11));
+    }
+    @media (calc($background-height * 26) < height <= calc($background-height * 28)) {
+        top: calc($logo-center-pos + ($background-height * 12));
+    }
+    @media (calc($background-height * 28) < height <= calc($background-height * 30)) {
+        top: calc($logo-center-pos + ($background-height * 13));
+    }
+    @media (calc($background-height * 30) < height <= calc($background-height * 32)) {
+        top: calc($logo-center-pos + ($background-height * 14));
+    }
+    @media (calc($background-height * 32) < height <= calc($background-height * 34)) {
+        top: calc($logo-center-pos + ($background-height * 15));
+    }
+    @media (calc($background-height * 34) < height <= calc($background-height * 36)) {
+        top: calc($logo-center-pos + ($background-height * 16));
+    }
+    @media (calc($background-height * 36) < height <= calc($background-height * 38)) {
+        top: calc($logo-center-pos + ($background-height * 17));
+    }
+    @media (calc($background-height * 38) < height <= calc($background-height * 40)) {
+        top: calc($logo-center-pos + ($background-height * 18));
+    }
+
+    background-color: $greyscale-0;
+
+    svg {
+        $fps: 4;
+        $duration_sec: 3;
+        $steps: calc($duration_sec * $fps);
+
+        height: 100%;
+        width: 100%;
+
+        fill: $color-primary-100;
+        stroke: $greyscale-90;
+
+        animation: 3s multicolor linear infinite;
+        animation-timing-function: steps($steps, end);
+
+        @keyframes multicolor {
+            0% {
+                fill: $color-primary-100;
+            }
+            33% {
+                fill: $color-secondary-100;
+            }
+            66% {
+                fill: $color-ternary-100;
+            }
+        }
+    }
+}