Ajax风格的一款网页Loading效果

以下是一个简单的HTML和CSS示例，展示了如何使用Ajax风格的网页Loading效果。这里我们使用CSS动画来创建一个旋转的加载指示器。

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Loading Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="loader">Loading...</div>

<!-- 这里可以放置你的网页内容 -->

</body>
</html>

CSS (style.css):


.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* 确保Loading层在最上层 */
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 如果需要，可以在这里添加一些基本的样式来美化你的页面 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4; /* 浅灰色背景 */
}

这段代码创建了一个简单的Ajax风格的Loading效果，它通过CSS的`@keyframes`和`animation`属性来实现一个旋转的圆形动画。你可以将这个`div`元素放在你的网页中的任何位置，它都会显示一个旋转的蓝色加载指示器，同时页面背景设置为浅灰色以提供更好的视觉效果。

请注意，实际项目中你可能需要根据实际需求调整Loading效果的样式和动画参数。