marzban-dev
117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
// state
|
|
|
|
const { $gsap: gsap } = useNuxtApp();
|
|
const disableLoadingOverlay = useState("disableLoadingOverlay");
|
|
const shouldRenderLoadingOverlay = ref(true);
|
|
|
|
const isWindowScrollLocked = useScrollLock(window);
|
|
|
|
// lifecycle
|
|
|
|
onMounted(async () => {
|
|
const timeline = gsap.timeline();
|
|
|
|
timeline.to("#loading-overlay", {
|
|
opacity: 1,
|
|
});
|
|
|
|
isWindowScrollLocked.value = true;
|
|
|
|
const preload = (url: string) => {
|
|
return new Promise((resolve) => {
|
|
const image = new Image();
|
|
image.src = url;
|
|
image.onload = () => resolve(true);
|
|
});
|
|
};
|
|
|
|
await Promise.all([
|
|
preload("/img/heymlz/heymlz-fast-loading.gif"),
|
|
preload("/img/heymlz/heymlz-pulling.gif"),
|
|
preload("/img/heymlz/heymlz-falling.gif"),
|
|
preload("/img/heymlz/heymlz-seat.gif"),
|
|
]);
|
|
|
|
timeline.to("#loading-overlay", {
|
|
opacity: 0,
|
|
delay: 5.5,
|
|
onComplete: () => {
|
|
shouldRenderLoadingOverlay.value = false;
|
|
isWindowScrollLocked.value = false;
|
|
disableLoadingOverlay.value = true;
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="shouldRenderLoadingOverlay"
|
|
id="loading-overlay"
|
|
class="fixed inset-0 size-full z-9999 flex-center bg-black"
|
|
>
|
|
<NuxtImg
|
|
id="loading-overlay-image"
|
|
src="/img/heymlz/heymlz-fast-loading.gif"
|
|
class="absolute z-20 w-[700px] brightness-75"
|
|
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>
|