marzban-dev
120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// state
|
|
|
|
const { $gsap: gsap } = useNuxtApp();
|
|
const showLoadingOverlay = useState("showLoadingOverlay");
|
|
const disableLoadingOverlay = useState("disableLoadingOverlay");
|
|
const shouldRenderLoadingOverlay = ref(true);
|
|
|
|
const isWindowScrollLocked = useScrollLock(window);
|
|
|
|
// watch
|
|
|
|
watch(() => showLoadingOverlay.value, (value) => {
|
|
if (!value) {
|
|
const timeline = gsap.timeline();
|
|
|
|
const imageElement = document.querySelector("#loading-overlay-image") as HTMLImageElement;
|
|
|
|
imageElement.src = "/img/heymlz-loading-2.gif";
|
|
|
|
timeline
|
|
.to("#loading-overlay", {
|
|
scale: 1
|
|
})
|
|
.to("#loading-overlay", {
|
|
opacity: 0,
|
|
delay: 2,
|
|
onComplete: () => {
|
|
shouldRenderLoadingOverlay.value = false;
|
|
isWindowScrollLocked.value = false;
|
|
disableLoadingOverlay.value = true;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
once: true
|
|
});
|
|
|
|
|
|
// lifecycle
|
|
|
|
onMounted(() => {
|
|
isWindowScrollLocked.value = true;
|
|
|
|
const newImage = new Image();
|
|
newImage.src = "/img/heymlz-loading-2.gif";
|
|
});
|
|
|
|
</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-loading-1.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> |