update for a loading scene

change from use video and audio on the loading now only use di video, and change the styling for loading

pages/index.tsx

@@ -67,23 +67,20 @@ const Home = () => {
     <Container>
       {initialLoading ? (
         <LoadingContainer>
-          <BackgroundVideo autoPlay muted loop>
+          <BackgroundVideo autoPlay loop>
             <source src="/video/video.webm" type="video/webm" />
           </BackgroundVideo>
-          <BackgroundAudio ref={audioRef} autoPlay loop>
-            <source src="/sounds/music.mp3" type="audio/mpeg" />
-          </BackgroundAudio>
           <ProgressContainer>
             <LoadingItem>{currentLoadingItem}</LoadingItem>
             <ProgressBarContainer>
-              <ProgressBar style={{ width: `${progress}%` }} />
+              <ProgressBar style={{ background: `linear-gradient(to right, #f0c8a0 0% ${progress - 5}%, #f0dcc8 ${progress}%, transparent ${progress}%)` }}/>
             </ProgressBarContainer>
             <ProgressText>{progress.toFixed(2)}%</ProgressText>
           </ProgressContainer>
         </LoadingContainer>
       ) : (
         <>
-          <VideoBackground autoPlay muted loop>
+          <BackgroundVideo autoPlay muted loop>
             <source
               src="/video/dekstop.mp4"
               type="video/mp4"
@@ -95,7 +92,7 @@ const Home = () => {
               media="(max-width: 767px)"
             />
             Your browser does not support the video tag.
-          </VideoBackground>
+          </BackgroundVideo>
           <Content>
             <h1>Create Shortlink</h1>
             <Input
@@ -129,15 +126,17 @@ const Home = () => {
 
 const Container = styled.div`
   position: relative;
-  display: flex;
+
-  justify-content: center;
-  align-items: center;
   height: 100vh;
   width: 100%;
   overflow: hidden;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
-const VideoBackground = styled.video`
+const BackgroundVideo = styled.video`
   position: absolute;
   top: 0;
   left: 0;
@@ -162,57 +161,6 @@ const Input = styled.input`
   margin-bottom: 20px;
 `;
 
-const Button = styled.button`
-  padding: 10px 20px;
-`;
-
-const ProgressContainer = styled.div`
-  position: absolute;
-  bottom: 20px;
-  width: 80%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 10px;
-  border-radius: 10px;
-`;
-
-const ProgressBarContainer = styled.div`
-  width: 100%;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 5px;
-  overflow: hidden;
-`;
-
-const ProgressBar = styled.div`
-  height: 10px;
-  background: linear-gradient(to right, #4caf50, #81c784);
-  transition: width 0.5s;
-`;
-
-const ProgressText = styled.span`
-  margin-top: 10px;
-  font-size: 14px;
-  color: white;
-`;
-
-const LoadingContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  position: relative;
-`;
-
-const LoadingItem = styled.div`
-  font-size: 14px;
-  margin-bottom: 10px;
-  color: white;
-`;
-
 const ShortlinkLoadingContainer = styled.div`
   margin-top: 20px;
   width: 80%;
@@ -224,18 +172,60 @@ const ShortlinkLoadingContainer = styled.div`
   border-radius: 10px;
 `;
 
-const BackgroundVideo = styled.video`
+const Button = styled.button`
-  position: absolute;
+  padding: 10px 20px;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: -1;
 `;
 
-const BackgroundAudio = styled.audio`
+const LoadingContainer = styled.div`
-  display: block;
+  width: 100%;
+  height: 100%;
+
+  color: white;
+  font-size: 18px;
+`;
+
+const ProgressContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  bottom: 40px;
+  padding: 0 20%;
+  box-sizing: border-box;
+
+  display: grid;
+  grid-template-areas:
+      'text . perc'
+      'bar bar bar'
+  ;
+  grid-template-columns: auto 1fr auto;
+
+  z-index: 2;
+`;
+
+const ProgressBarContainer = styled.div`
+  grid-area: bar;
+  width: 100%;
+
+  background: rgba(240, 220, 200, 6%);
+  border: 1px solid rgba(255, 255, 255, 8%);
+  border-radius: 5px;
+  overflow: hidden;
+`;
+
+const ProgressBar = styled.div`
+  height: 0.6em;
+
+  background: transparent;
+  transition: width 0.5s;
+`;
+
+const ProgressText = styled.span`
+  grid-area: perc;
+  margin-right: 8px;
+`;
+
+const LoadingItem = styled.div`
+  grid-area: text;
+  margin-left: 8px;
 `;
 
 export default Home;