68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
<script setup>
|
|
const store = useStore();
|
|
const elapsed = ref(0);
|
|
const ellipsis = ref("");
|
|
|
|
onMounted(() => {
|
|
const animateDots = setInterval(() => {
|
|
if (ellipsis.value.length < 3) ellipsis.value += ".";
|
|
else ellipsis.value = "";
|
|
}, 500);
|
|
|
|
const start = Date.now();
|
|
const timer = setInterval(() => {
|
|
if (store.ready) {
|
|
clearInterval(timer);
|
|
clearInterval(animateDots);
|
|
elapsed.value = 0;
|
|
} else {
|
|
const ms = Date.now() - start;
|
|
elapsed.value = Math.round(ms / 1000);
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="absolute w-dvw h-dvh has-background-blue-100"
|
|
style="z-index: 40; /* because .navbar is 30 */"
|
|
>
|
|
<div
|
|
class="absolute is-flex is-gap-1.5 is-flex-direction-column is-justify-content-center is-align-items-center"
|
|
style="top: 40%; left: 50%; transform: translateX(-50%)"
|
|
>
|
|
<NuxtImg
|
|
src="/favicon.svg"
|
|
width="72"
|
|
height="72"
|
|
class="pulse"
|
|
/>
|
|
<p
|
|
v-if="elapsed > 2"
|
|
class="has-text-grey"
|
|
>
|
|
<span>Đang tải dữ liệu</span>
|
|
<span class="absolute">{{ ellipsis }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|