<script setup>
import { useGlobalStore } from "@/store/GlobalStore";

const globalStore = useGlobalStore();
</script>

<template>
  <div class="loading-area">
    <v-progress-linear
      :active="globalStore.getIsLoading"
      indeterminate
      absolute
      top
      color="primary"
      height="5px"
      class="mt-0 progress-bar"
    ></v-progress-linear>
    <v-overlay
      width="100%"
      v-model="globalStore.getIsLoading"
      scrim="lightNeutral"
      opacity="0.5"
      class="align-center justify-center"
    >
      <v-row>
        <v-col align="center">
          <v-progress-circular
            indeterminate
            size="64"
            color="primary"
          ></v-progress-circular>
        </v-col>
      </v-row>
    </v-overlay>
  </div>
</template>

<style scoped>
.loading-area {
  z-index: 999;
  position: fixed;
}
.progress-bar {
  z-index: 999;
  position: fixed;
}
</style>
