From 874751880ba33e6c48b460cd5ab5e0a26d6c10c8 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 21 Feb 2025 19:58:54 +0330
Subject: [PATCH] Create loading overlay for landing

---
 frontend/components/global/LoadingOverlay.vue | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 frontend/components/global/LoadingOverlay.vue

diff --git a/frontend/components/global/LoadingOverlay.vue b/frontend/components/global/LoadingOverlay.vue
new file mode 100644
index 0000000..6329eca
--- /dev/null
+++ b/frontend/components/global/LoadingOverlay.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+
+// state
+
+const { $gsap: gsap } = useNuxtApp();
+
+// lifecycle
+
+onMounted(() => {
+    const timeline = gsap.timeline();
+
+    timeline
+        .to("#loading-overlay", {
+            scale: 1
+        })
+        .to("#loading-overlay", {
+            scale: 0.8,
+            opacity: 0,
+            delay: 5
+        })
+        .to("#loading-overlay", {
+            opacity: 0,
+            y: "20%"
+        });
+});
+
+</script>
+
+<template>
+    <div id="loading-overlay" class="fixed inset-0 size-full z-9999 flex-center bg-black">
+        <img id="loading-overlay-image" src="/video/loading-2.gif" class="opacity-0 scale-70 absolute z-20" alt="" />
+        <div
+            id="loading-overlay-gradient"
+            class="opacity-0 scale-x-0 w-[1000px] h-[70px] bg-linear-to-r from-blue-500 via-violet-500 to-purple-500 blur-[150px] rounded-[100px]"
+        />
+    </div>
+</template>
+
+<style>
+
+#loading-overlay-image {
+    animation-name: loading-overlay-image-animation;
+    animation-duration: 1s;
+    animation-delay: 0.75s;
+    animation-fill-mode: forwards;
+}
+
+#loading-overlay-gradient {
+    animation: 1.5s normal 0.5s 1 forwards loading-overlay-gradient-animation,
+    1s ease-in-out 2s infinite alternate-reverse loading-overlay-gradient-pules-animation;
+}
+
+@keyframes loading-overlay-image-animation {
+    from {
+        opacity: 0;
+        scale: 0.7;
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes loading-overlay-gradient-animation {
+    from {
+        opacity: 0;
+        scale: 0 1 1;
+    }
+
+    to {
+        opacity: 0.9;
+        scale: 1 1 1;
+    }
+}
+
+@keyframes loading-overlay-gradient-pules-animation {
+    from {
+        opacity: 0.8;
+        scale: 0.8 1 1;
+    }
+
+    to {
+        opacity: 0.9;
+        scale: 1 1 1;
+    }
+}
+</style>
\ No newline at end of file