Loading动画（loading animation）通常用于在等待时间较长的操作期间向用户提供视觉反馈。本文将介绍如何使用HTML、CSS和JavaScript制作一个简单的Loading动画。
我们需要在HTML文件中创建一个空的div元素，其中包含一个带有“loader”类的子元素。这个类将用于在CSS文件中定义我们的Loading动画。
<div class="loading-container">
<div class="loader"></div>
</div>
我们需要在CSS文件中定义“loader”类的样式。我们将使用CSS中的@keyframes规则来定义一个简单的旋转动画，该动画将在“loader”元素上执行。
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
这段代码将创建一个宽高120像素的圆形，边框为16像素的白色，顶部边框为蓝色。我们使用“spin”关键字将@keyframes动画应用于元素，并使其永久循环。
我们需要编写JavaScript代码来控制Loading动画的显示和隐藏。我们将使用window.onload事件来确保页面加载完成后再添加或删除Loading动画。
window.onload = function() {
var loader = document.querySelector(".loading-container");
loader.classList.add("hide");
};
在这个例子中，我们查找页面上的“.loading-container”元素，将“hide”类添加到它上面。该类定义了一个CSS动画，使元素平滑淡出。您可以根据需要自定义“hide”类。
我们已经成功地创建了一个简单的Loading动画。在本文中，我们介绍了如何使用HTML、CSS和JavaScript创建Loading动画，并提供了相应的示例代码。通过修改样式和动画，您可以自定义自己的Loading动画，以便更好地与您的网站或应用程序配合使用。
本文链接：http://task.lmcjl.com/news/12600.html