今天來給大家介紹一下常見的JQUERY進(jìn)度條的制作方法。

//HTML代碼
<div class="progress">
<div class="progress-bar"></div>
</div>

首先，我們需要用HTML創(chuàng)建一個DIV元素，加上progress類，之后再創(chuàng)建一個子元素，加上progress-bar類。這個子元素就是進(jìn)度條展示的主體。

//CSS代碼
.progress {
width: 100%;
height: 20px;
background-color: #EEE;
border-radius: 8px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #007BFF;
border-radius: 8px;
transition: width 0.5s ease-in-out;
}

接下來，我們需要為進(jìn)度條添加CSS樣式。首先給進(jìn)度條DIV元素設(shè)置寬度、高度、背景顏色、圓角和隱藏溢出內(nèi)容。然后設(shè)置進(jìn)度條主體的寬度為0，讓進(jìn)度條一開始不顯示，背景顏色為藍(lán)色，圓角與父元素相同，并為寬度增加0.5秒的過渡效果，使其在進(jìn)行進(jìn)度更新時更加平滑。

//JS代碼
$(document).ready(function(){
var progress = $('.progress-bar');
var width = 0;
var interval = setInterval(function(){
width++;
progress.css("width", width + "%")
if (width == 100) {
clearInterval(interval);
}
}, 50);
});

最后，我們需要編寫JS代碼來動態(tài)更新進(jìn)度條的寬度。使用JQUERY中的.ready()函數(shù)確保DOM加載完畢后再執(zhí)行代碼。首先獲取進(jìn)度條主體元素和當(dāng)前寬度，然后通過setInterval()函數(shù)不斷增加寬度，每50ms一次。當(dāng)寬度達(dá)到100%時，清除定時器。

通過以上步驟，我們就可以制作出簡單的JQUERY進(jìn)度條了。