add CSS loader to the terminal

Author: jcubic

docs/src/components/Terminal/index.tsx

@@ -163,8 +163,7 @@ export default function Interpreter(): JSX.Element {
           return <script key={script} src={script} />
         })}
       </Head>
-      <div className={clsx('terminal', styles.marker)} ref={ref}></div>
-      <div className={styles.term} />
+      <div className={clsx('terminal', styles.term)} ref={ref}/>
       {show_commands && (
         <div className={styles.commands}>
           <p>Top-level Commands:</p>

docs/src/components/Terminal/styles.module.css

@@ -7,12 +7,38 @@
     text-align: left;
     resize: vertical;
     overflow: hidden;
+    box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.3);
 }
 
-.term[class*="terminal"] {
-    box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.3);
+.term:empty::before {
+    content: '';
+    display: block;
+    width: 50px;
+    padding: 8px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color);
+    --_m:
+        conic-gradient(#0000 10%,#000),
+        linear-gradient(#000 0 0) content-box;
+    -webkit-mask: var(--_m);
+            mask: var(--_m);
+    -webkit-mask-composite: source-out;
+            mask-composite: subtract;
+    animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+    to {
+        transform: translate(-50%, -50%) rotate(1turn)
+    }
 }
 
+
 .commands p {
     margin: 0;
 }
@@ -26,11 +52,6 @@
     gap: 5px;
 }
 
-.marker {
-    position: absolute;
-    left: -9999999999px;
-}
-
 .shake {
     animation: shake 0.2s;
 }