在JavaScript中，创建加载动画的方法有很多种。下面是一个简单的示例，使用HTML、CSS和JavaScript创建一个简单的加载动画。
HTML部分：
html复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加载动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS部分 (styles.css)：
css复制代码
html动画效果#loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.circle {
width: 20px;
height: 20px;
margin: 10px;
border-radius: 50%;
animation: circle 1s infinite;
}
.circle:nth-child(1) { background: red; animation-delay: 0s; }
.circle:nth-child(2) { background: green; animation-delay: 0.5s; }
.circle:nth-child(3) { background: blue; animation-delay: 1s; }
@keyframes circle {
0% { transform: translateY(0); }
100% { transform: translateY(-30px); }
}
JavaScript部分 (script.js)：
你可以在这里添加一些逻辑来控制加载动画的显示和隐藏，例如在某个异步操作（如AJAX请求）开始时显示加载动画，并在操作完成时隐藏加载动画。但在这个简单的示例中，我们不需要JavaScript。
这个示例创建了一个简单的加载动画，由三个不同颜的圆形组成，每个圆形都有自己的动画效果，使它们看起来像是在旋转。你可以根据需要修改CSS样式和动画效果，以创建更复杂或更具个性化的加载动画。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。