Commit cc44f795 authored by 刘小敏's avatar 刘小敏

管理后台全局增加加载中效果

parent 2a2c1ff0
......@@ -2,9 +2,54 @@
<html>
<head>
{include file="common/meta" /}
<style>
/* 加载遮罩 */
.page-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
}
/* 转圈动画 */
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
margin-top: 20px;
color: #666;
font-size: 14px;
}
</style>
</head>
<body class="inside-header inside-aside {:defined('IS_DIALOG') && IS_DIALOG ? 'is-dialog' : ''}">
<!-- 加载动画 -->
<div class="page-loading" id="page-loading">
<div>
<div class="loading-spinner"></div>
<div class="loading-text">加载中...</div>
</div>
</div>
<div id="main" role="main">
<div class="tab-content tab-addtabs">
<div id="content">
......@@ -41,5 +86,21 @@
</div>
</div>
{include file="common/script" /}
<!-- 页面加载完成后隐藏加载动画 -->
<script>
// DOM加载完成后隐藏
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
document.getElementById('page-loading').style.display = 'none';
}, 500);
});
// 页面完全加载后确保隐藏
window.addEventListener('load', function() {
document.getElementById('page-loading').style.display = 'none';
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment