效果展示

思路

封装一个组件，放Img，伪类样式，固定在屏幕fixed

然后App应用这个组件，Z index拉最大，防止用户在加载动画时乱点，

v-show绑定loading，该数据可以放vuex还是任一的公共状态管理变量区域

代码

<template>
  <!--组件的结构-->
    <div class="loading-bg">
        <div class="loading-img"></div>
        <div class="loading-image-dot"></div>
    </div>
</template>
<script>
//组件交互相关的代码(数据、方法等等)
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>