html代码
<div class="loading-container"><div class="spinner"></div><div class="loading-text">加载中，请稍候...</div></div>
css样式
/* 加载中容器的样式 */.loading-container {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh; /* 全屏高度，方便展示 */// background-color: #f0f0f0; /* 可选背景色 */}/* 加载指示器的样式 */.spinner {width: 30px;height: 30px;border: 3px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top-color: #3498db; /* 加载指示器的颜色 */animation: spin 1s linear infinite;margin-bottom: 10px;}/* 旋转动画 */@keyframes spin {to {transform: rotate(360deg);}}.loading-text {font-size: 16px;color: #333;width: 100%;text-align: center;}
效果
