<template>
<div class="loading-content">
<div class="loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
</div>
<!-- <div class="loading-text">!!!!!!</div> -->
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { defineProps, defineEmits } from "vue";
const props = defineProps({
//子组件接收父组件传递过来的值
loadingShow: Boolean,
});
// const emit = defineEmits(['stopLoading'])
</script>
<style>
.loading-content {
position: absolute;
z-index: 2000;
/* background-color: rgba(0, 0, 0, 0.8); */
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 80px;
transition: opacity 0.3s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loading-spinner {
text-align: center;
}
.loading-spinner .circular {
height: 42px;
width: 42px;
animation: loading-rotate 2s linear infinite;
}
.loading-spinner .path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: #409eff;
stroke-linecap: round;
}
.loading-text {
font-size: 14px;
color: #409eff;
}
@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
to {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
</style>
进入页面初始化展示loading时,可以不想那么复杂,写一个定时器就好,设置一定的时间,时间到了,loading效果消失,展示真正的数据内容