jquery loading动画

原创

mob64ca12e51ecb 2023-08-28 04:24:09 ©著作权

文章标签 loading动画 jQuery HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e51ecb的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jquery loading动画教程

1. 介绍

在网站开发中，loading动画可以增加用户体验，提升网站的可用性。本文将教你如何使用jQuery实现一个简单的loading动画。

2. 实现步骤

下面是实现loading动画的步骤：

pie
    title 实现loading动画步骤
    "Step 1" : 创建HTML结构
    "Step 2" : 添加CSS样式
    "Step 3" : 使用jQuery控制动画

3. 创建HTML结构

首先，我们需要在HTML文件中创建一个用于显示loading动画的元素。可以使用一个<div>元素来代表loading动画。

<div id="loading"></div>

4. 添加CSS样式

接下来，我们需要为loading动画添加一些CSS样式，使其在页面中居中并显示为一个圆形。

<style>
#loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 将loading动画居中 */
  width: 40px;  /* 设置loading动画的宽度和高度 */
  height: 40px;
  border-radius: 50%;  /* 将loading动画设置为圆形 */
  border: 4px solid #f3f3f3;  /* 设置loading动画的边框 */
  border-top: 4px solid #3498db;  /* 设置loading动画的顶部边框 */
  animation: spin 2s linear infinite;  /* 添加旋转动画 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

5. 使用jQuery控制动画

最后，我们需要使用jQuery来控制loading动画的显示和隐藏。在页面加载完成后，我们将显示loading动画，并在所有资源加载完成后隐藏它。

<script src="
<script>
$(document).ready(function() {
  // 显示loading动画
  $("#loading").show();

  // 页面所有资源加载完成后隐藏loading动画
  $(window).on("load", function() {
    $("#loading").hide();
  });
});
</script>