当我们使用 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);

下面是实现效果：

以上两种实现方式都可以通过调整相应的参数，来实现不同的效果。在具体应用时，需要根据自己的需求来选择使用哪一种方式。