<template>
<div class="loading"></div>
</template>
<script>
export default {
name: 'Loading'
}
</script>
<style scoped>
.loading {
position: fixed;
left: 0;
top: 0;
background: url('~@/images/loading.svg') center center no-repeat #fff;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
全局CSS
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
<div >
<transition name="fade">
<loading v-if="isLoading"></loading>
</transition>
</div>
原文链接:https://blog.csdn.net/zuo_zuo_blog/article/details/102701914