influence/components/common/customLoading.vue

<template>
  <div v-if="getCount > 0" class="loading-container">
    <div class="loading-background">
      <!-- <v-icon class="cursor-default" color="black" icon="mdi-cow mdi-spin" size="200" style=""></v-icon> -->
      <v-progress-circular indeterminate :size="80"></v-progress-circular>
    </div>
  </div>
</template>

<script setup>
  import {useLoadingStore} from "~/stores/loading"
  // 로딩 스토어
  let store = useLoadingStore()
  let { getCount } = storeToRefs(store)           // state 의 경우 반응성 유지를 위해 필요
  let {$log} = useNuxtApp()
  $log.debug('로딩컴포넌트')
</script>

<style lang="scss" scoped>
  .loading-container {
    z-index: 9999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .loading-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>