<template>
  <div class="w-full h-full absolute z-40 top-0 left-0 bg-black opacity-50 flex items-center justify-center ">
  </div>
  <div class="loader text-red absolute z-50 "></div>
</template>

<script setup>

</script>

<style lang="css" scoped>
/* HTML: <div class="loader"></div> */
.loader {
  width: 150px;
  height: 15px;
  --c:#90f4f5 50%,#0000 0;
  background: 
    linear-gradient( 90deg,var(--c)) 0 0,
    linear-gradient(-90deg,var(--c)) 0 0;
  background-size: 20px 100%;
  background-repeat: repeat-x;
  animation: l10 1s infinite linear;
}
@keyframes l10 {
    100% {background-position: -20px 0,20px 0}
}
</style>