<script setup lang="ts">
import { useProgress } from '@tresjs/cientos'
const { hasFinishLoading, progress } = await useProgress()
</script>
<template>
    <Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"
        leave-active-class="opacity-0 transition-opacity duration-200">
        <div v-show="!hasFinishLoading"
            class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
            <div class="w-200px">
                Идет загрузка... {{ progress }} %
                <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
            </div>
        </div>
    </Transition>
</template>