update

t_global_Fine_temp3/src/views/LoadingView.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-if="isLoading"
+    class="loading-overlay"
+    :style="{ backgroundColor: loadingBg.value }"
+  >
+    <div class="spinner"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useLoadingStore } from "@/stores/loadingStore";
+import { loadingBg } from "@/utils/common";
+
+export default defineComponent({
+  computed: {
+    loadingBg() {
+      return loadingBg;
+    },
+  },
+  setup() {
+    const loadingStore = useLoadingStore();
+    const isLoading = computed(() => loadingStore.isLoading);
+
+    return {
+      isLoading,
+    };
+  },
+});
+</script>
+
+<style>
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.spinner {
+  border: 4px solid #f1f1f1;
+  border-top: 4px solid #003087;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>