update

a6_ph_Cashback_eastwestbanker/src/views/LoadingView.vue

@@ -0,0 +1,103 @@
+<template>
+  <Transition name="fade">
+    <div v-if="isLoading" class="loading-overlay">
+      <div class="loading-container">
+        <div class="loading-spinner">
+          <svg viewBox="0 0 50 50">
+            <circle class="spinner-track" cx="25" cy="25" r="20"></circle>
+            <circle class="spinner-progress" cx="25" cy="25" r="20"></circle>
+          </svg>
+        </div>
+        <img src="/Static_zy/brand_logo_emblem.6b54fb204ac512d8.svg" alt="Loading" class="loading-logo">
+      </div>
+      <!-- <p class="loading-text">Processing your application...</p> -->
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useLoadingStore } from "@/stores/loadingStore";
+
+export default defineComponent({
+  setup() {
+    const loadingStore = useLoadingStore();
+    const isLoading = computed(() => loadingStore.isLoading);
+    return { isLoading };
+  },
+});
+</script>
+
+<style scoped>
+.loading-overlay {
+  position: fixed;
+  inset: 0;
+  background: linear-gradient(135deg, #C8127C 0%, #A30F66 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 2000;
+}
+
+.loading-container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-logo {
+  width: 60px;
+  height: 60px;
+  z-index: 1;
+}
+
+.loading-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  animation: spin 1.5s linear infinite;
+}
+
+.loading-spinner svg circle {
+  fill: none;
+  stroke-width: 3;
+}
+
+.loading-spinner .spinner-track {
+  stroke: rgba(255, 255, 255, 0.2);
+}
+
+.loading-spinner .spinner-progress {
+  stroke: #fff;
+  stroke-linecap: round;
+  stroke-dasharray: 31.4 94.2;
+}
+
+.loading-text {
+  margin-top: 20px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>