42 lines
1.7 KiB
HTML
42 lines
1.7 KiB
HTML
<div class="loading-overlay fixed inset-0 z-50 flex items-center justify-center bg-white bg-opacity-75 transition-opacity duration-300" style="opacity: 0; visibility: hidden;">
|
|
<div class="text-center">
|
|
<div class="inline-block">
|
|
<svg class="animate-spin h-10 w-10 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="mt-4 text-indigo-600 font-medium text-lg">加载中...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 创建全局加载器
|
|
window.Loader = {
|
|
show: function(message) {
|
|
const loader = document.querySelector('.loading-overlay');
|
|
if (loader) {
|
|
// 设置自定义消息
|
|
if (message) {
|
|
const messageEl = loader.querySelector('.text-lg');
|
|
if (messageEl) messageEl.textContent = message;
|
|
}
|
|
|
|
// 显示加载器
|
|
loader.style.opacity = '1';
|
|
loader.style.visibility = 'visible';
|
|
}
|
|
},
|
|
|
|
hide: function() {
|
|
const loader = document.querySelector('.loading-overlay');
|
|
if (loader) {
|
|
loader.style.opacity = '0';
|
|
setTimeout(() => {
|
|
loader.style.visibility = 'hidden';
|
|
}, 300);
|
|
}
|
|
}
|
|
};
|
|
</script>
|