marzban-dev
109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import type { LoadingOverlayProvideType } from "~/pages/index.vue";
|
|
|
|
// provide / inject
|
|
|
|
const { showLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
|
|
|
|
// state
|
|
|
|
const { $gsap: gsap } = useNuxtApp();
|
|
|
|
const shouldRenderLoadingOverlay = ref(true);
|
|
|
|
// lifecycle
|
|
|
|
watch(() => showLoadingOverlay.value, (value) => {
|
|
if (!value) {
|
|
const timeline = gsap.timeline();
|
|
|
|
timeline
|
|
.to("#loading-overlay", {
|
|
scale: 1
|
|
})
|
|
.to("#loading-overlay", {
|
|
scale: 0.8,
|
|
opacity: 0,
|
|
delay: 3
|
|
})
|
|
.to("#loading-overlay", {
|
|
opacity: 0,
|
|
y: "20%",
|
|
onComplete: () => {
|
|
shouldRenderLoadingOverlay.value = false;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
once: true
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="shouldRenderLoadingOverlay"
|
|
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.35s;
|
|
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> |