jquery自定义loading

要自定义 jQuery loading，可以按照以下步骤：

1. 在 HTML 文件中，创建一个 div 元素，用于包含 loading 动画，并设置其样式、位置等属性。

2. 在 CSS 文件中，编写 loading 动画的样式，例如使用 CSS3 的动画属性。

3. 在 jQuery 中，编写自定义 loading 函数，该函数将显示 loading 动画，并在加载完成后隐藏它。

下面是一个示例代码：

HTML：

<div id="loading">
  <div class="loading-icon"></div>
</div>

CSS：

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-top-color: #fc0;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

jQuery：

function showLoading() {
  $("#loading").show();
}

function hideLoading() {
  $("#loading").hide();
}

$(document).ready(function() {
  showLoading();

  // 进行一些异步操作，例如 AJAX 请求
  $.ajax({
    url: "http://example.com",
    success: function() {
      hideLoading();
    }
  });
});

以上代码创建了一个黑色背景的 loading 动画，使用了 CSS3 动画属性进行旋转。在 jQuery 中，通过调用 showLoading 函数显示 loading 动画，异步操作完成后调用 hideLoading 函数隐藏它。