feat(site): fullscreen loader

ThaUnknown · Dec 2, 2023 · 2ef05e3 · 2ef05e3
1 parent 3320b94
commit 2ef05e3
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/web/src/app.html b/web/src/app.html
@@ -12,5 +12,10 @@
 
 <body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sveltekit-preload-data="hover">
 	%sveltekit.body%
+	<div class='h-full con font-weight-bold overflow-hidden position-absolute'>
+		<div class='h-full text d-flex align-items-center justify-content-center text-nowrap text-capitalize'>
+			Loading...
+		</div>
+	</div>
 </body>
 </html>
diff --git a/web/src/lib/components/Loader.svelte b/web/src/lib/components/Loader.svelte
@@ -0,0 +1,57 @@
+<script>
+  import { onMount } from 'svelte'
+
+  let animate = false
+
+  onMount(() => {
+    animate = true
+  })
+</script>
+
+<div class='h-full con font-weight-bold overflow-hidden position-absolute' class:animate>
+  <div class='h-full text d-flex align-items-center justify-content-center text-nowrap text-capitalize'>
+    Loading...
+  </div>
+</div>
+
+<svelte:window on:load={console.log} />
+
+<style>
+  @keyframes transition {
+    0% {
+      background-position: top left;
+      width: 100vw ;
+    }
+    65% {
+      background-position: top left;
+      width: 100vw;
+    }
+    95% {
+      background-position: top right
+    }
+    100% {
+      background-position: top right;
+      width: 0;
+    }
+  }
+  .con {
+    z-index: 90;
+    background-position: top left;
+    width: 100vw;
+  }
+  .animate {
+    animation: 2s transition ease forwards;
+  }
+  .text {
+    font-size: 10rem;
+    color: transparent;
+    font-family: Verdana, sans-serif;
+    width: 100vw;
+    background: linear-gradient(90deg, #fff 50%, #101113 0), linear-gradient(90deg, #101113 50%, #fff 0);
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+    background-position: inherit;
+    -webkit-background-clip: text, padding-box;
+    background-clip: text, padding-box;
+  }
+</style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script>
   import Footer from '$lib/components/Footer.svelte'
+  import Loader from '$lib/components/Loader.svelte'
   import Navbar from '$lib/components/Navbar.svelte'
 </script>
 
+<Loader />
 <div class='page-wrapper with-transitions position-relative' data-sidebar-type='overlayed-all'>
   <Navbar />
   <div class='overflow-x-hidden content-wrapper h-full overflow-y-scroll position-relative'>