地 址：联系地址联系地址联系地址
电 话：020-123456789
网址：bfbird.com
邮 箱：admin@aa.com
一、自建站自站加载转纯CSS实现旋转转圈效果
创建一个覆盖全屏的建网`div`作为加载容器，并在其中放置旋转的自建站自站加载转元素（如`div`或`span`）。
```html
```
CSS样式
使用`@keyframes`定义旋转动画，建网并通过`animation`属性应用到加载元素上。自建站自站加载转
```css
.load-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: f1f1ea;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: 666;
box-shadow: 0 2px 0 666;
animation: loop 1s infinite linear;
-webkit-animation: loop 1s infinite linear;
}
@keyframes loop {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
二、建网使用CSS伪元素实现动态加载效果
通过`::before`或`::after`伪元素创建旋转的自建站自站加载转加载动画，无需额外元素。建网
```css
body {
position: relative;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,自建站自站加载转 -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: fff;
box-shadow: 0 2px 0 666;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
三、结合JavaScript实现动态加载提示
适用于AJAX请求或页面加载时显示加载动画，建网请求完成后自动隐藏。自建站自站加载转
HTML结构
添加一个加载提示元素，建网初始状态隐藏。自建站自站加载转
```html
加载中...
```
CSS样式
与纯CSS方法相同，建网定义旋转动画。自建站自站加载转
JavaScript控制
在发起AJAX请求前显示加载提示，请求完成后隐藏。
```javascript
document.getElementById('btnQuery').onclick = function() {
document.getElementById("loading").style.display = 'block';
// 发起AJAX请求
// 示例：fetch('data.json')
// .then(response => response.json())
// .then(data => {
// // 处理数据
// document.getElementById("loading").style.display = 'none';
// })
// .catch(error => {
// console.error('Error:', error);
document.getElementById("loading").style.display = 'none';
// });
};
```
四、响应式加载提示
根据浏览器窗口大小动态调整加载提示位置，避免遮挡内容。
```javascript
window.onload = function() {
var loadingTop = window.innerHeight - 61 > 0 ? (window.innerHeight - 61) / 2 : 0;
var loadingLeft = window.innerWidth - 215 > 0 ? (window.innerWidth - 215) / 2 : 0;
var loadingHtml = '页面加载中...';
document.open();
document.write(loadingHtml);
document.close();
window.onresize = function() {
// 可选：调整加载提示位置
};
};
```
总结
以上方法可根据需求选择实现方式：
纯CSS： 适用于简单静态加载提示 动态加载
响应式设计：通过JavaScript调整加载提示位置
建议优先使用纯CSS方法，兼顾兼容性和性能，动态加载场景再结合JavaScript增强体验。
