页面正在加载中代码(网页打开慢时用)
时间: 2024-02-03 14:14:51 浏览: 57
页面加载时 提示 正在加载中
4星 · 用户满意度95%
这是一个简单的页面加载动画,可以在网页加载缓慢时使用:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Loading Animation</title>
<style>
/* 设置背景颜色和字体 */
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
/* 设置加载动画的外层容器 */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* 定义旋转动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
```
这段代码定义了一个名为 `loader` 的容器,并使用 CSS3 动画旋转一个圆形边框。将这个代码复制到一个 HTML 文件中,然后在浏览器中打开该文件,即可看到加载动画。
阅读全文