<template>
  <div>
    <div class="loader-page">
      <div class="d-flex flex-column align-items-center main">
        <img
          class="animated-image animate"
          height="125"
          width="125"
          fetchpriority="high" loading="eager"
          src="../assets/imgs/loader.svg"
          alt="loader"
        />
        <!-- <IconLoader></IconLoader> -->
      </div>
    </div>
  </div>
</template>

<script setup>
// const nuxtApp = useNuxtApp()

// nuxtApp.hook('page:finish', () => {
//   document.querySelector('.loader-page')?.remove()
// })
// onMounted(() => {
//   requestAnimationFrame(() => {
//     document.querySelector('.animated-image')?.classList.remove('no-animate')
//     document.querySelector('.animated-image')?.classList.add('animate')
//   })
// })
</script>

<style  lang="scss">
// ::-webkit-scrollbar {
//   display:none;
// }

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.animated-image {
  width: 125px;
  height: auto;
  display: block;
}
.no-animate {
  animation: none;
}
.animated-image.animate {
   animation: pulse 1s infinite ease-in-out;
  will-change: transform, opacity;
}
.loader-page {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00000096;

  z-index: 9999999999;
  text-align: center;
}
</style>
