效果展示

思路

封裝一個(gè)組件，放Img，偽類樣式，固定在屏幕fixed

然后App應(yīng)用這個(gè)組件，Z index拉最大，防止用戶在加載動(dòng)畫時(shí)亂點(diǎn)，

v-show綁定loading，該數(shù)據(jù)可以放vuex還是任一的公共狀態(tài)管理變量區(qū)域

代碼

<template><!--組件的結(jié)構(gòu)--><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div>
</template>
<script>
//組件交互相關(guān)的代碼(數(shù)據(jù)、方法等等)
export default {name: 'pageLoading',data() {return {}},methods: {},
}
</script><style>
.loading-bg {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);position: fixed;display: flex;justify-content: center;align-items: center;z-index: 100000;
}.loading-img {width: 100px;height: 100px;background: url('https://cdn.zww0891.fun/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240701112347.jpg') center center;background-size: cover;border-radius: 50%;border: 4px solid #f0f0f2;animation: blink infinite ease 0.5s;
}.loading-image-dot:before {content: '';position: absolute;background: #6bdf8f;border: 4px solid #f0f0f2;border-radius: 50%;width: 30px;height: 30px;top: 50%;left: 50%;transform: translateX(20px) translateY(20px);
}@keyframes blink {0% {opacity: 0.4;}50% {opacity: 1;}100%{opacity: 0.4;}
}
</style>