ContentLoading.vue

<script setup>
import { MESSAGES } from '@/data/messages'
</script>

<template>
  <div class="content-loading">
    <span>{{ MESSAGES['LOADING_DATA'] }}</span>
  </div>
</template>

<style scoped>
.content-loading {
  background-color: hsl(var(--clr-primary));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--clr-white);
  animation: pulse 750ms infinite ease-in-out;
}
</style>