From 10ea724c49fee09fbc8e3193c41b701625449d82 Mon Sep 17 00:00:00 2001
From: KorbsStudio <ks@korbsstudio.com>
Date: Wed, 8 Feb 2023 17:51:29 -0500
Subject: [PATCH] Update splash

---
 astro/components/Splash.astro | 28 ++++++++++++++--------------
 astro/styles/splash.scss      | 24 ++++++++++++------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/astro/components/Splash.astro b/astro/components/Splash.astro
index 2ca9b00..f5285ad 100644
--- a/astro/components/Splash.astro
+++ b/astro/components/Splash.astro
@@ -11,22 +11,22 @@ import '../styles/splash.scss'
 
             {SPLASH.map(item => (
                 <div class={item.loading}>
-                        <div class="splash-loading-spinner"><div class="spinner"></div></div>
-                        <div class="splash-loading-progressbar"><div class="progressbar"></div></div>
-                        <div class="splash-loading-jumping-balls">
-                            <div class="b-container">
-                                <span class="ball"></span>
-                                <span class="ball"></span>
-                                <span class="ball"></span>
-                            </div>
+                    <div class="splash-loading-spinner"><div class="spinner"></div></div>
+                    <div class="splash-loading-progressbar"><div class="progressbar"></div></div>
+                    <div class="splash-loading-jumping-balls">
+                        <div class="b-container">
+                            <span class="ball"></span>
+                            <span class="ball"></span>
+                            <span class="ball"></span>
                         </div>
-                        <div class="splash-loading-glowing-bars">
-                            <div class="bars-container">
-                                <span class="bar"></span>
-                                <span class="bar"></span>
-                                <span class="bar"></span>
-                            </div>
+                    </div>
+                    <div class="splash-loading-glowing-bars">
+                        <div class="bars-container">
+                            <span class="bar"></span>
+                            <span class="bar"></span>
+                            <span class="bar"></span>
                         </div>
+                    </div>
                 </div>
             ))}
         </div>
diff --git a/astro/styles/splash.scss b/astro/styles/splash.scss
index 68cf083..a2a36ed 100644
--- a/astro/styles/splash.scss
+++ b/astro/styles/splash.scss
@@ -21,9 +21,9 @@
     left: 0px;
     width: 100%;
     height: 100%;
-    opacity: 0;
+    opacity: 1;
     pointer-events: none;
-    animation: 2.4s splash ease-in-out;
+    // animation: 2.4s splash ease-in-out;
     .splash-content {
         position: fixed;
         top: 50%;
@@ -44,7 +44,6 @@
             left: 50%;
             transform: translate(-50%);
             .Spinner {
-                .splash-loading-spinner {display: none}
                 .splash-loading-progressbar {display: none}
                 .splash-loading-glowing-bars {display: none}
                 .splash-loading-jumping-balls {display: none}
@@ -61,7 +60,7 @@
                 }
                 @keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(359deg)}}
             }
-            .Progressbar {
+            .ProgressBar {
                 .splash-loading-spinner {display: none}
                 .splash-loading-glowing-bars {display: none}
                 .splash-loading-jumping-balls {display: none}
@@ -75,9 +74,10 @@
                     content: "";
                     position: absolute;
                     background: lightblue;
-                    width: 0%;
-                    animation: 1s LOAD ease-in-out
+                    width: 100%;
+                    animation: 2s ProgressComplete linear;
                 }
+                @keyframes ProgressComplete {from {width: 0%} to {width: 100%}}
             }
             .JumpingBalls {
                 .splash-loading-progressbar {display: none}
@@ -87,7 +87,7 @@
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    width: 60px;
+                    width: 40px;
                     flex-direction: row;
                 }
                 
@@ -95,8 +95,8 @@
                     background-color: #fff;
                     border-radius: 50%;
                     display: block;
-                    width: 15px;
-                    height: 15px;
+                    width: 8px;
+                    aspect-ratio: 1;
                     animation: jump 0.7s ease-in-out infinite;
                 }
                 
@@ -127,14 +127,14 @@
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    width: 40px;
+                    width: 14px;
                     flex-direction: row;
                 }
                 
                 .bar {
                     background-color: #fff;
-                    height: 50px;
-                    width: 10px;
+                    height: 24px;
+                    width: 2px;
                     display: block;
                     animation: increase 1s ease-in-out infinite;
                 }