html结构:
<div class='container '>
<div class="overlay" v-if="loading">
<div class="loading-spinner"></div>
<div class="loading-text">正在加载,请稍后...</div>
</div>
</div>
css样式:
.container {
width: 50%;
min-height: 75vh;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.7);
z-index: 10;
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid #409eff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
color: #409eff;
margin-left: 10px;
}
}
有需要的话,可以加个进度条,这里直接用的elementplus的
<el-progress :percentage="progress"></el-progress>
,如果页面只有数字,就给这个组件设置个width