jQuery進度條是Web開發過程中常見的交互性組件之一。它能夠在頁面中方便地展示某個任務的完成進度，如文件上傳、音視頻播放等。本文將介紹一段常用的jQuery進度條代碼模板。

<!-- HTML結構 -->
<div class="progress">
<div class="progress-bar"></div>
</div>
<!-- CSS樣式 -->
.progress {
width: 100%;
height: 30px;
background-color: #f2f2f2;
position: relative;
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #17a2b8;
position: absolute;
left: 0;
top: 0;
}
<!-- jQuery代碼 -->
$(document).ready(function() {
// 獲取進度條元素
var $progressBar = $('.progress-bar');
// 獲取進度條寬度
var progressBarWidth = $progressBar.width();
// 設置文件上傳總大小
var totalSize = 100;
// 模擬文件上傳進度
var currentSize = 0;
var intervalId = setInterval(function() {
currentSize += 10;
if(currentSize > totalSize) {
clearInterval(intervalId);
alert('上傳成功！');
} else {
// 設置進度條寬度
$progressBar.width(currentSize / totalSize * progressBarWidth);
}
}, 1000);
});

以上代碼將創建一個寬度為100%、高度為30px的進度條，初始狀態下進度為0%。隨著文件上傳進度的增加，jQuery將動態地設置進度條的寬度并默默地顯示文件上傳進度。