第一次写博客，有点小鸡动。
因为做了一个导出Excel表格功能，但是现在数据多起来了，后台在从数据库读取出来，写入到Excel表格，这个过程会耗点时间，1W条数据大概要6秒左右吧，也不清楚，我是内网可能还快点。反正就是他们用的人在点了下载之后需要等，所以就加了个进度条，以此填补下他们等待的时候空虚又寂寞的心，忽悠用户一下，哈哈。
度娘上查了很多插件，发现原理也不难，就自己写一个简单版的，在博客里马克一下，以后自己还能用，而且，如果对他人有帮助，那也是极好的。

先是写了两个div，里面一个做动态进度条，外面的做躯壳，代码如下：

<div id="progressShell" style="display: none;z-index:80;" class="shell_css" ><div id="barFill" style="display: none;z-index:90;" class="bar_css"></div>
</div>

再是写了些样式，代码如下：

.shell_css{height: 40px;width: 500px;margin-top: -700px;margin-left: 30%;float:left;background-color: white;border: 1px solid #666;-moz-box-shadow: 2px 2px 10px #666;-webkit-box-shadow: 2px 2px 10px #666;box-shadow:2px 2px 10px #666;-webkit-border-radius: 30px;-moz-border-radius: 30px;filter:alpha(opacity=99); /*IE滤镜*/position:absolute; z-index:99;-moz-opacity:0.99; /*Firefox私有*/opacity:0.99;/*其他*/overflow: hidden;
}.bar_css{height: 100%;width: 0px;float:left;text-align:center;line-height:40px;color:white;background-color: #0c87ff; filter:alpha(opacity=99); /*IE滤镜*/-moz-opacity:0.99; /*Firefox私有*/opacity:0.99;/*其他*/overflow: hidden;
}

最后js代码画图，搞定：

//画进度条方法function draw() {i+=1;var maskDiv = $("#allMask");maskDiv.css("display","block");var shellDiv = $("#progressShell");//不变的底框；shellDiv.css("display","block");var barDiv = $("#barFill");//进度框；barDiv.attr("class","bar_css");barDiv.css("display","block");innerWid += 5;barDiv.css({width:innerWid+"px"});percent += 1;barDiv.html(percent+"%");if(i==97){clearInterval(res);}}function exportWorkInfoExcel() {i = 0;innerWid = 0;percent = 1;res = setInterval(draw, 120);//设置跑完进度时间var shellDiv = $("#progressShell");//不变的底框；var barDiv = $("#barFill");//进度框；var maskDiv = $("#allMask");$.ajax({type:"POST",async: true,url:"exportWorkInfoExcel.do",dataType:"text",success:function(data){if(data != null && data != ""){clearInterval(res);barDiv.css({width:"500px"});barDiv.html("100%");if(time != null){clearTimeout(time);time = null;    }time = setTimeout(function(){shellDiv.css("display","none");barDiv.css("display","none");maskDiv.css("display","none");var da = data;da = "${ctx}/"+da;window.location.href=da;}, 300);}else{alert("网络连接超时，无法操作数据！");}},error: function(){clearInterval(res);shellDiv.css("display","none");barDiv.css("display","none");maskDiv.css("display","none");alert("网络连接超时，无法操作数据！");}});}

最后的最后，加个蒙板，显得好看点：

<div id="allMask" style="width:100%; height:100%;position:absolute; z-index:70; background:#ffffff;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5; top:0; left:0; display:none; ">
</div>