diff --git a/page/src/App.tsx b/page/src/App.tsx
index 31b9523c..c659ca16 100644
--- a/page/src/App.tsx
+++ b/page/src/App.tsx
@@ -25,7 +25,9 @@ function Spinner() {
   }
 
   return (
-    <div className="fixed z-9999 top-10 right-10 p-8 rounded-2xl ring-of-dots bg-[#00000081]"></div>
+    <div className="fixed z-9999 top-10 right-10">
+      <span className="loader"></span>
+    </div>
   );
 }
 
diff --git a/page/src/animation.css b/page/src/animation.css
index cc13b131..d699bb7b 100644
--- a/page/src/animation.css
+++ b/page/src/animation.css
@@ -1,311 +1,33 @@
-:root {
-  --ring-full-color: #ffffff00;
-  --ring-half-color: #ffffff75;
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
 }
-
-/**
-  * Ring of dots
-  *
-  * @author jh3y
-*/
-@-webkit-keyframes ring-of-dots {
-  0% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-  14.28571% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-  }
-  28.57143% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  42.85714% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  57.14286% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  71.42857% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  85.71429% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-    box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-  }
-  100% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-}
-@keyframes ring-of-dots {
-  0% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-  14.28571% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 var(--ring-half-color),
-      -4.45042px -19.49856px 0 0 var(--ring-full-color),
-      12.4698px -15.63663px 0 0 white;
-  }
-  28.57143% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 var(--ring-half-color),
-      -18.01938px -8.67767px 0 0 var(--ring-full-color),
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  42.85714% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 var(--ring-half-color),
-      -18.01938px 8.67767px 0 0 var(--ring-full-color),
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  57.14286% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 var(--ring-half-color),
-      -4.45042px 19.49856px 0 0 var(--ring-full-color),
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  71.42857% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-    box-shadow:
-      20px 0px 0 0 var(--ring-half-color),
-      12.4698px 15.63663px 0 0 var(--ring-full-color),
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 white;
-  }
-  85.71429% {
-    -webkit-box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-    box-shadow:
-      20px 0px 0 0 var(--ring-full-color),
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 white,
-      12.4698px -15.63663px 0 0 var(--ring-half-color);
-  }
-  100% {
-    -webkit-box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-    box-shadow:
-      20px 0px 0 0 white,
-      12.4698px 15.63663px 0 0 white,
-      -4.45042px 19.49856px 0 0 white,
-      -18.01938px 8.67767px 0 0 white,
-      -18.01938px -8.67767px 0 0 white,
-      -4.45042px -19.49856px 0 0 var(--ring-half-color),
-      12.4698px -15.63663px 0 0 var(--ring-full-color);
-  }
-}
-
-.ring-of-dots:before {
-  animation: ring-of-dots 1s infinite linear reverse;
-  border-radius: 10px;
+.loader::after,
+.loader::before {
   content: "";
-  display: block;
-  height: 10px;
-  width: 10px;
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #fff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: animloader 2s linear infinite;
+}
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }