loading效果

src/App.vue

@@ -4,6 +4,7 @@
       <HomeFadeIn
         v-if="isShowFadeInMask"
         class="fade-in-mask"
+        @loading-end="onLoadingEnd"
       />
     </transition>
     <router-view />
@@ -98,17 +99,17 @@ export default {
     HomeFadeIn,
   },
   setup () {
-    const isShowFadeInMask = ref(false)
-    onMounted(() => {
-      setTimeout(() => {
-        isShowFadeInMask.value = false
-      }, 2000)
-    })
+    const isShowFadeInMask = ref(true)
+    function onLoadingEnd() {
+      isShowFadeInMask.value = false
+    }
 
     const isShowNavBar = ref(true)
     const activeNavItemIdx = ref(0)
     return {
       isShowFadeInMask,
+      onLoadingEnd,
+
       isShowNavBar,
       activeNavItemIdx,
     }

src/components/HomeFadeIn.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="comp-root">
+    <video
+      class="bg-video"
+      src="@/assets/videos/loading.mp4"
+      autoplay
+      playsinline
+      muted
+    />
     <div class="progress">
       <span>{{ progress }}</span><span>%</span>
     </div>
@@ -11,11 +18,25 @@
 
 <script>
 export default {
+  emits: ['loading-end'],
   data() {
     return {
       progress: 0,
+      intervalId: null,
     }
   },
+  mounted() {
+    this.intervalId = setInterval(() => {
+      if (this.progress < 100) {
+        this.progress++
+      } else {
+        clearInterval(this.intervalId)
+        this.$emit('loading-end')
+      }
+    }, 20)
+  },
+  methods: {
+  }
 }
 </script>
 
@@ -27,10 +48,18 @@ export default {
   width: 100%;
   height: 100%;
   background-color: red;
+  >.bg-video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
   >.progress {
     position: absolute;
     left: 50%;
-    top: 40%;
+    top: 50%;
     transform: translate(-50%, -50%);
     >span:nth-of-type(1) {
       font-size: 32px;