百分比進(jìn)度條是現(xiàn)在很常見(jiàn)的網(wǎng)頁(yè)效果，在許多網(wǎng)頁(yè)設(shè)計(jì)中都會(huì)用到。使用js和css來(lái)實(shí)現(xiàn)這個(gè)進(jìn)度條效果非常方便，下面我們將介紹詳細(xì)的實(shí)現(xiàn)方法。

.progress-bar{
height: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
margin-top: 10px;
}
.progress-bar span{
display: block;
height: 20px;
border-radius: 10px;
background-color: #54a446;
box-shadow: inset 0 -1px 3px rgba(0,0,0,.25), inset 0 1px 2px rgba(0,0,0,.25);
position: relative;
overflow: hidden;
transition: all 2s ease-out;
}

在代碼塊中，我們定義了一個(gè)名為progress-bar的名稱，它包括一個(gè)span元素。其中，progress-bar定義了這個(gè)進(jìn)度條的樣式和效果。span元素定義了當(dāng)前進(jìn)度所在的位置和進(jìn)度條的長(zhǎng)度。我們使用了box-shadow等css屬性來(lái)讓進(jìn)度條看起來(lái)更加真實(shí)。

(function() {
var progressbar = $('.progress-bar'),
bar = progressbar.find('span'),
bw = progressbar.width(),
percent = bar.attr('data-percent'),
step = 0;
var progressBar = function() {
if (step<= percent) {
bar.css('width', (step * bw / 100) + 'px');
step++;
} else {
clearInterval(progress);
}
};
var progress = setInterval(function() {
progressBar();
}, 50);
})();

這段代碼中，我們使用了jQuery來(lái)實(shí)現(xiàn)進(jìn)度條的動(dòng)態(tài)變化。首先，我們找到了這個(gè)進(jìn)度條并獲取到它的寬度（bw）。然后，我們獲取到span元素的data-percent值，這個(gè)值是進(jìn)度條的百分比。然后，我們定義了一個(gè)progressBar方法來(lái)增加進(jìn)度條的長(zhǎng)度，直到達(dá)到百分比為止。最后，我們使用setInterval方法來(lái)每50毫秒自動(dòng)運(yùn)行一次progressBar方法，達(dá)到動(dòng)態(tài)變化的效果。

通過(guò)這些代碼，我們就可以輕松地實(shí)現(xiàn)一個(gè)漂亮的百分比進(jìn)度條效果了！