style: loading text

src/components/FullScreenLoading.tsx

@@ -15,7 +15,9 @@ const Loading = () => {
       position="absolute"
       className="bg-blue-900 tracking-widest overflow-hidden select-none bg-opacity-75 z-50 w-screen h-screen justify-center items-center"
     >
-      <Box className="text-blue-200 font-mono uppercase">Loading();</Box>
+      <Box id="loading-text" className="text-4xl text-blue-200 font-mono uppercase">
+        Loading();
+      </Box>
     </Box>
   );
 };

src/index.scss

@@ -1,13 +1,33 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+#loading-text {
+  position: relative;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  overflow: hidden;
+  background: linear-gradient(90deg, #63b3ed, #c3dafe, #63b3ed);
+  background-repeat: no-repeat;
+  background-size: 80%;
+  animation: animate 3s linear infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: rgba(255, 255, 255, 0);
+}
+
+@keyframes animate {
+  0% {
+    background-position: -500%;
+  }
+  100% {
+    background-position: 500%;
+  }
 }