jQuery進度條是一種非常有用的工具，可以幫助網站設計師在網頁中加入進度條來顯示頁面加載的進程。下面是一個用jQuery實現的進度條代碼示例。
<div class="progress-bar"> <div class="progress" data-progress="0"></div> </div>
如上所示，這段代碼使用了一個外層
，內含一個進度條
，其初始值為0。
function progressBar() {
var $progressBar = $('.progress-bar'),
$progress = $('.progress'),
$window = $(window);
$window.on('load', function() {
$progressBar.fadeOut(500);
});
setInterval(function() {
var winHeight = $window.height(),
docHeight = $(document).height(),
scrollTop = $window.scrollTop(),
trackLength = docHeight - winHeight,
total = (scrollTop / trackLength) * 100;
$progress.attr('data-progress', total);
}, 150);
}
progressBar();這段代碼包含了一個進度條函數progressBar()，它將計算頁面的滾動距離、頁面高度以及滾動條的位置等參數，并通過相應的計算來更新進度條的值。同時，這個函數中還使用了一個定時器，每過150毫秒便會自動更新一次進度條。
在上述代碼之中，我們可以看到進度條元素的類名都已經設定好，如.progress-bar、.progress等。這些類名是為了方便CSS樣式表的編寫而用的，因為我們可以通過這些類名來選擇這些HTML元素，然后為它們添加CSS樣式。
使用上述示例代碼，我們可以很容易地實現網站頁面的進度條制作，讓用戶可以實時查看頁面的加載進度，提高用戶體驗。
上一篇css引用的字體加載
下一篇css開源圖標庫