menduner/src/components/Loading/index.vue

<template>
  <v-overlay :model-value="visible" class="align-center justify-center" :close-on-content-click="false" :disabled="true" :contained="contained">
    <div class="loader"></div>
  </v-overlay>
</template>

<script setup>
defineOptions({ name: 'LoadingPage'})

defineProps({
  visible: Boolean,
  contained: Boolean
})
</script>

<style scoped lang="scss">
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  color :#0000;
  overflow: hidden;
  animation: l9 5s infinite cubic-bezier(0.3,1,0,1);
}
.loader:before {
  content:"Loading..."
}
@keyframes l9 {
  0%  {text-shadow: 0    0 #000, 11ch 0 #dbf03f, 22ch 0 #f03756, 33ch 0 #6fedf8,44ch 0 #000}
  25% {text-shadow:-11ch 0 #000,  0ch 0 #dbf03f, 11ch 0 #f03756, 22ch 0 #6fedf8,33ch 0 #000}
  50% {text-shadow:-22ch 0 #000,-11ch 0 #dbf03f,  0ch 0 #f03756, 11ch 0 #6fedf8,22ch 0 #000}
  75% {text-shadow:-33ch 0 #000,-22ch 0 #dbf03f,-11ch 0 #f03756,  0ch 0 #6fedf8,11ch 0 #000}
  100%{text-shadow:-44ch 0 #000,-33ch 0 #dbf03f,-22ch 0 #f03756,-11ch 0 #6fedf8, 0ch 0 #000}
}


// .loader {
//   width: 120px;
//   height: 22px;
//   border-radius: 20px;
//   color: #00B760;
//   border: 2px solid;
//   position: relative;
// }
// .loader::before {
//   content: "";
//   position: absolute;
//   margin: 2px;
//   inset: 0 100% 0 0;
//   border-radius: inherit;
//   background: currentColor;
//   animation: l6 2s infinite;
// }
// @keyframes l6 {
//     100% {inset:0}
// }
</style>