當我們使用 JavaScript 編寫前端交互時，往往需要讓用戶在操作的過程中等待一段時間。這個等待的過程，可能是數據加載的時間，也可能是頁面跳轉的等待時間。這個時候，彈出一個進度條，可以有效的提高用戶體驗。這一篇文章，將介紹兩種代碼實現方式，來完成 JavaScript 彈出進度條。

方法一

方法一是通過 CSS3 實現的，原理就是利用寬度漸變，讓進度條從無到有，最終達到 100% 的效果。代碼如下：

// HTML 代碼
<div class="progress">
<div class="progress-bar"></div>
</div>
// CSS 代碼
.progress {
height: 3px;
position: relative;
background-color: #f2f2f2;
}
.progress-bar {
width: 0%;
height: 100%;
position: absolute;
transition: width 0.6s ease;
background-color: #008CBA;
}
// JavaScript 代碼
// 彈出進度條
document.querySelector('.progress-bar').style.width = '100%';
// 關閉進度條
document.querySelector('.progress-bar').style.width = '0%';

下面是實現效果：

方法二

方法二是通過 jQuery 的進度條插件來實現的。這個插件，需要通過引入 jQuery 和 jQuery UI 庫才能使用。代碼如下：

// HTML 代碼
<div id="progressbar"></div>
// JavaScript 代碼
// 定義進度條配置
var progressbar = $( "#progressbar" );
progressbar.progressbar({
value: 0,
max: 100
});
// 彈出進度條
var value = 0;
function updateProgressbar() {
value += 1;
progressbar.progressbar("value", value);
if (value< 100) {
setTimeout(updateProgressbar, 20);
}
}
setTimeout(updateProgressbar, 20);
// 關閉進度條
progressbar.progressbar("value", 0);

下面是實現效果：

以上兩種實現方式都可以通過調整相應的參數，來實現不同的效果。在具體應用時，需要根據自己的需求來選擇使用哪一種方式。