(1) 首先在html页面中需要引入Bootstrap框架:在html最顶端复制下面代码

<!-- 引入BootStrap 框架-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

(2) 然后在html中加入进度条标签:由两层div组成，里层div的width决定进度条的进度

<!-- 进度条标签-->
<td>
<div id="prog_out" class="progress progress-striped active" >
    <div id="bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0/100</div>
</div>
</td>

(3) 在js中对进度条的width进行更新，我这里是通过 ajax 每隔1秒向后台获取进度，然后对width进行更新

setInterval(function flush(){
    $.ajax({
        type: "get",
        url: "/flush",
        async: false,
        success: function (response) {
              $("#bar").width(response + '%');   //response为后端返回的进度，为int型 0-100
              $("#bar").html(response + '%');    //这里$("#bar")对应里层div标签的id
        }
    })
},1000);

(4) 后端代码(基于SpringBoot框架)

@RequestMapping(value = "/flush")
@ResponseBody
public int flush() {
    ...

        int length = 50; //这里写个伪代码代表当前进度为50%，实际需要你自己去获取，我的另外一条博客有详细介绍怎么获取下载文件的大小
    ...
    return  length ;
}