spinner go spin

2 files changed, 14 insertions, 2 deletions

diff --git a/web/script/transition.ts b/web/script/transition.ts
index 426b593..9b00523 100644
--- a/web/script/transition.ts
+++ b/web/script/transition.ts
@@ -75,7 +75,7 @@ function fade(dir: boolean) {
         setTimeout(() => {
             if (dir) document.body.removeChild(overlay)
             setTimeout(() => {
-                overlay.append(e("div", { class: "jst-spinner" }, "Spinner goes here..."))
+                overlay.append(e("div", { class: "jst-spinner" }, "This is a spinner."))
             }, 500)
             res()
         }, duration)
diff --git a/web/style/js-transition.css b/web/style/js-transition.css
index 648b177..154cd1f 100644
--- a/web/style/js-transition.css
+++ b/web/style/js-transition.css
@@ -14,6 +14,14 @@
         background-color: transparent;
     }
 }
+@keyframes jst-spin {
+    from {
+        transform: rotate(0turn);
+    }
+    from {
+        transform: rotate(-1turn);
+    }
+}
 
 .jst-fade {
     position: fixed;
@@ -36,10 +44,14 @@
     position: fixed;
     top: 50vh;
     left: 50vw;
-    transform: translate(-50%, -50%);
+    translate: -50% -50%;
     color: var(--c-warn);
     font-size: large;
     z-index: 11;
+    animation-name: jst-spin;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
 }
 nav {
     z-index: 11;