Added styling to loading screen

YARC-Official · Jan 10, 2024 · b8d1033 · b8d1033
1 parent a5c6a7d
commit b8d1033
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/src/components/LoadingScreen/LoadingScreen.module.css b/src/components/LoadingScreen/LoadingScreen.module.css
@@ -14,4 +14,59 @@
  font-style: normal;
  font-weight: 400;
  line-height: normal;
+}
+
+.factContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ color: #FFF;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.factHeader {
+ color: var(--accent);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ text-transform: uppercase;
+}
+
+.progressRoot {
+ display: flex;
+ width: 350px;
+ padding: 5px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 10px;
+
+ border-radius: 97px;
+ background: rgba(255, 255, 255, 0.025);
+}
+
+.progressIndicator {
+ width: 100%;
+ height: 5px;
+
+ border-radius: 55px;
+ background: var(--accent);
+
+ animation-name: progressAnimation;
+ animation-duration: 2s;
+}
+
+@keyframes progressAnimation {
+ from {
+ width: 0%;
+ }
+ to {
+ width: 100%;
+ }
 }
diff --git a/src/components/LoadingScreen/index.tsx b/src/components/LoadingScreen/index.tsx
@@ -1,8 +1,16 @@
 import styles from "./LoadingScreen.module.css";
+import * as Progress from "@radix-ui/react-progress";
 
 const LoadingScreen: React.FC = () => {
  return <div className={styles.container}>
- <p>Loading...</p>
+ <Progress.Root className={styles.progressRoot}>
+ <Progress.Indicator className={styles.progressIndicator} />
+ </Progress.Root>
+
+ <div className={styles.factContainer}>
+ <p className={styles.factHeader}>Fun Fact</p>
+ YARG stands for Yet Another Rhythm Game
+ </div>
  </div>;
 };
 

diff --git a/src/routes/Queue/Queue.module.css b/src/routes/Queue/Queue.module.css
@@ -5,6 +5,8 @@
  align-items: flex-start;
  gap: 25px;
  align-self: stretch;
+
+ z-index: 1000;
 }
 
 .banner {