before delete 3software

src/components/pnMagicOverlay.vue

@@ -4,18 +4,36 @@
     maximized
     persistent
     transition-show="slide-up"
-    transition-hide="slide-down">
+    transition-hide="slide-down"
+    >
     <div 
       class="flex items-center justify-center fullscrean-card column"
       >
-      <q-icon :name = "icon" color="brand" size="160px"/>
-      <div class="text-h5 q-mb-lg">
+      <div
+        id="icon-wrapper" 
+        :style="{ position: 'relative', height: size + 'px', width: size + 'px'}"
+        >
+        <div class="animation icon-position"></div>
+        <transition
+          appear
+          enter-active-class="animated zoomIn slow"
+         >
+          <q-icon
+            v-if="showIcon"
+            :name = "icon"
+            color="brand"
+            size="160px"
+            class="icon-position"
+          />
+        </transition>
+      </div>
+      <div class="text-h5 q-mb-lg q-mx-md" align="center">
           {{ $t(message1) }}
       </div>
 
       <div
         v-if="message2" 
-        class="absolute-bottom q-py-lg flex justify-center row"
+        class="absolute-bottom q-py-lg q-mx-md" align="center"
         >
         {{ $t(message2) }}
       </div>
@@ -24,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps<{
@@ -35,30 +53,35 @@ const props = defineProps<{
 }>()
 
 const visible = ref(false)
+const showIcon = ref(false)
 const router = useRouter()
 const timers = ref<number[]>([])
+const size = 160
 
 const setupTimers = () => {
   visible.value = true
-  
   const timer1 = window.setTimeout(() => {
-    visible.value = false
-    
-    const timer2 = window.setTimeout(() => {
-      router.push({ name: props.routeName })
-    }, 300)
-    
-    timers.value.push(timer2)
-  }, 2000)
-
+    showIcon.value = true
+  }, 300)
   timers.value.push(timer1)
-};
+  const timer2 = window.setTimeout(() => {
+    visible.value = false
+    showIcon.value = false
+  }, 2000)
+  timers.value.push(timer2)
+}
 
 const clearTimers = () => {
   timers.value.forEach(timer => clearTimeout(timer))
   timers.value = []
+  visible.value = false
+  showIcon.value = false
 }
 
+watch(visible, async (newVal) => {
+  if (newVal === false) await router.push({ name: props.routeName })
+})
+
 onMounted(setupTimers)
 onUnmounted(clearTimers)
 </script>
@@ -68,6 +91,32 @@ onUnmounted(clearTimers)
     background-color: white;
   }
 
+  @property --percentage {
+  initial-value: 0%;
+  inherits: false;
+  syntax: "<percentage>";
+}
+ 
+.animation {
+  background: conic-gradient(transparent var(--percentage), white 0);
+  width: 100%;
+  height: 100%;
+  animation: timer 1s linear;
+  animation-fill-mode:forwards;
+  z-index: 10;
+  position: absolute;
+}
+ 
+@keyframes timer {
+  to {
+    --percentage: 100%;
+  }
+}
+
+.icon-position {
+  position: absolute;
+  top:0;
+  left:0;
+}
+
 </style>
-
-