Create loading overlay for landing

2025-02-21 19:58:54 +03:30
parent a9d2e7d1c6
commit 874751880b
1 changed files with 88 additions and 0 deletions
@@ -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>