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

方法一

方法一是通過 CSS3 實(shí)現(xiàn)的，原理就是利用寬度漸變，讓進(jìn)度條從無到有，最終達(dá)到 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 代碼
// 彈出進(jìn)度條
document.querySelector('.progress-bar').style.width = '100%';
// 關(guān)閉進(jìn)度條
document.querySelector('.progress-bar').style.width = '0%';

下面是實(shí)現(xiàn)效果：

方法二

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

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

下面是實(shí)現(xiàn)效果：

以上兩種實(shí)現(xiàn)方式都可以通過調(diào)整相應(yīng)的參數(shù)，來實(shí)現(xiàn)不同的效果。在具體應(yīng)用時(shí)，需要根據(jù)自己的需求來選擇使用哪一種方式。