javascript 通用loading动画效果实例代码

当然，以下是一个简单的JavaScript实现的通用loading动画效果示例代码。这个例子中，我将使用HTML和CSS来创建一个基本的加载动画，并使用JavaScript来控制其显示和隐藏。

**HTML (index.html)**:


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

<div id="loading" class="loading">Loading...</div>

<button onclick="showLoading()">Show Loading</button>
<button onclick="hideLoading()">Hide Loading</button>

<script src="script.js"></script>
</body>
</html>

**CSS (styles.css)**:


.loading {
  display: none; /* 默认不显示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  z-index: 1000; /* 确保它位于页面顶部 */
}

/* 如果需要更复杂的动画，可以添加CSS动画 */
/* 这里为了简洁，我们仅显示文本 */

**JavaScript (script.js)**:


function showLoading() {
  document.getElementById('loading').style.display = 'flex'; // 显示加载动画
}

function hideLoading() {
  document.getElementById('loading').style.display = 'none'; // 隐藏加载动画
}

这个示例中，我创建了一个名为`.loading`的CSS类，它定义了一个固定定位的div，背景为半透明黑色，并且文本位于中心。默认情况下，这个div是不显示的（通过CSS的`display: none;`属性）。

在JavaScript中，我定义了两个函数`showLoading`和`hideLoading`，它们分别用于显示和隐藏这个加载动画。

用户可以通过点击页面上的按钮来控制加载动画的显示和隐藏。

这个示例是非常基础的，但它展示了如何结合HTML、CSS和JavaScript来创建一个简单的加载动画效果。你可以根据需求调整CSS样式来创建更复杂的动画效果。