jQuery遮罩進(jìn)度條是一種常見的網(wǎng)頁加載動畫效果。它能夠在頁面加載或數(shù)據(jù)請求時，使用戶等待更加有趣味和互動性。下面通過代碼演示的方式，來實現(xiàn)一個簡單的jQuery遮罩進(jìn)度條效果。

<!-- HTML代碼 -->
<div id="loading">
<div class="loading-container">
<div class="loading-icon"></div>
<p class="loading-text">數(shù)據(jù)正在加載，請稍后...</p>
</div>
</div>
<!-- CSS代碼 -->
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.5);
}
.loading-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.loading-icon {
width: 50px;
height: 50px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
-webkit-animation: spin 1s infinite ease-in-out;
animation: spin 1s infinite ease-in-out;
}
.loading-text {
margin-top: 10px;
font-size: 16px;
}
<!-- JS代碼 -->
$(document).ready(function() {
$('body').append('<div id="loading"><div class="loading-container"><div class="loading-icon"></div><p class="loading-text">數(shù)據(jù)正在加載，請稍后...</p></div></div>');
});
$(window).on('load', function() {
setTimeout(function() {
$('#loading').fadeOut(500);
}, 1000);
});

在上述代碼中，HTML部分是用來創(chuàng)建一個遮罩和一個顯示加載狀態(tài)的div，CSS部分設(shè)置了遮罩和div的樣式，JS部分則使用jQuery來實現(xiàn)加載效果。通過在body中添加遮罩div，再在window加載后通過定時器來隱藏遮罩div，實現(xiàn)了簡單的jQuery遮罩進(jìn)度條效果。