在某项目中遇到excel导入时客户要求显示滚动条效果，在此基础上使用js为其封装了个进度条类，只需要简单为其创建个div容器就可轻松实现效果，类具体如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bootstrap 101 Template</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- 进度条示例 -->
<!-- <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<span class="proText"></span>
</div>
</div> -->
<div id="contain"></div>
<button onclick="refreshPro()">refresh</button>
<button onclick="finish()">finish</button>
<button onclick="remove()">remove</button>
<script>
var progressBar = null;
function refreshPro() {
var con = $("#contain");
progressBar = new ProgressBar();
progressBar.setContainer(con);
progressBar.showProcessBar();
}
function finish() {
progressBar.finishProcessBar();
}
function remove() {
progressBar.destroyProcessBar();
}
//如果在规定时间内都没有完成进度条,则停留在90%地方,一旦完成立刻到100%
//写在ajax请求执行开始处进行创建,执行完成后执行完成进度条进度为100%
//定义进度条类
//提供构建/展示/销毁等工作
//container为要包含进入条展示容器
function ProgressBar($container) {
var self = this;
var container;
if($container != null) {
container = $container;
}
var interval; //创建的周期函数对象
var _id = "progress_bar" + new Date().getTime(); //progressBar随机id编号
