jQuery是一個非常流行的JavaScript庫，它提供了許多便捷的函數和方法，使得前端開發變得更加容易和高效。其中之一就是加載動畫的功能，也就是我們常說的loading。下面我們來看一下如何使用jQuery實現一個簡單的loading效果。

// HTML代碼
<div class="loading">
<img src="loading.gif" alt="loading" />
<p>Loading...</p>
</div>
// CSS代碼
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loading img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.loading p {
font-size: 18px;
color: #fff;
}
// JavaScript代碼
$(document).ready(function() {
// 顯示loading
$(".loading").fadeIn();
// 加載完成后隱藏loading
$(window).on("load", function() {
$(".loading").fadeOut();
});
});

在這個例子中，我們首先在HTML中添加了一個帶有loading圖標和文本的div元素，通過CSS樣式將其居中顯示并添加了半透明的黑色背景。接著在JavaScript中使用了jQuery的fadeIn()和fadeOut()方法控制loading的顯示和隱藏。在頁面加載完成后，我們通過監聽window的load事件來觸發隱藏loading的操作，確保loading在頁面完全加載后才消失。