jQuery 進度條是一種常用的前端展示方式，能夠動態顯示加載進度，提供更好的用戶體驗。下面我們來介紹一下如何通過 jQuery 實現進度條的動態顯示。
<!-- HTML 結構 --> <div id="progressBar"></div>
我們先在 HTML 中添加一個 `
` 元素，作為進度條的容器。接下來，在 CSS 中設置進度條的樣式：
#progressBar {
width: 100%;
height: 10px;
background-color: #ddd;
position: relative;
}
#progressBar::before {
content: "";
display: block;
width: 0%;
height: 100%;
background-color: #6aafe5;
position: absolute;
top: 0;
left: 0;
transition: width 0.3s ease-in-out;
}這里我們使用了 `::before` 偽元素來表示進度條的進度部分，初始時寬度為 0。接下來，在 JavaScript 中使用 jQuery 來獲取頁面加載進度，并設置進度條的寬度：
<!-- JS 代碼 -->
$(window).on('load', function() {
var progressBar = $('#progressBar');
progressBar.find('::before').animate({
width: '100%'
}, 1000, function() {
progressBar.fadeOut(500);
});
});這段代碼中，我們監聽 `window` 的 `load` 事件獲取頁面加載進度，然后通過 jQuery 獲取進度條的容器 `#progressBar`。接下來，我們選取 `#progressBar` 的 `::before` 元素，并使用 `animate` 函數來設置它的寬度，并在動畫結束后將進度條隱藏。
有了這些代碼，我們就能夠實現一個簡單的 jQuery 進度條了。不僅如此，我們還可以加入更多的功能，例如根據 AJAX 請求進度來動態更新進度條的狀態等等，為用戶提供更好的體驗。
上一篇vue的星星評分