jQuery進度條顏色漸變

// HTML代碼
<div class="progress-bar"></div>
// CSS代碼
.progress-bar{
width: 50%;
height: 20px;
background-color: #3D3D3D;
border-radius: 5px;
}
// JS代碼
$(function(){
var bar = $('.progress-bar');
var width = 0;
var interval = setInterval(function(){
width += 1;
bar.css('width', width + '%');
if(width >= 100){
clearInterval(interval);
}
if(width > 75){
bar.css('background-color', '#FFB347');
}else if(width > 50){
bar.css('background-color', '#FFD700');
}else if(width > 25){
bar.css('background-color', '#98FB98');
}
}, 50);
});

以上代碼實現了一個簡單的進度條。進度條初始時是灰色的，當進度到達一定百分比時，進度條顏色發生漸變，最終變為橙色。代碼中，通過setInterval()方法定時更新進度條的寬度，當寬度大于某一閾值時，通過改變background-color屬性實現顏色漸變。這種方式可以讓進度條更加生動，給用戶帶來更好的視覺體驗。