最近项目需要做一个下载文件的进度条，看网上上传文件进度条下载，特分享出来方便大家查阅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下载进度条</title>
</head>
<style type="text/css">
.containerBar{
521px;
border:1px solid #008fcd;
height:21px;
border-radius: 10px;
overflow: hidden;
}
#bar{
background:#008fcd;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
#total{
margin-bottom:20px;
}
/* 加载中 */
#loading1{
padding:10px 0 0 80px;
height:32px;
}
#loading1 span{
position: absolute;
left: 40px;
}
.demo1 {
4px;
height: 4px;
border-radius: 2px;
background: #008fcd;
float: left;
margin: 5px 3px;
animation: demo1 linear 1s infinite;
-webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1){
animation-delay:0s;
}
.demo1:nth-child(2){
animation-delay:0.15s;
}
.demo1:nth-child(3){
animation-delay:0.3s;
}
.demo1:nth-child(4){
animation-delay:0.45s;
}
.demo1:nth-child(5){
animation-delay:0.6s;
}
@keyframes demo1
{
0%,60%,100% {transform: scale(1);}
30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1
{
0%,60%,100% {transform: scale(1);}
30% {transform: scale(2.5);}
}
</style>
<body>
<div class="containerBar">
<div id="bar" style="0%;"></div>
</div>
<span id="total" >0%</span>
<div id="loading1">
<span>正在生成码包</span>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
<div class="demo1"></div>
</div>
</body>
<script type="text/javascript">
function getTimeNow(){//当前时间201909290420
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
let nowTime = year.toString()+addZero(month).toString()+addZero(day).toString()+addZero(hour).toString()+addZero(minute).toString()+addZero(second).toString()
return nowTime
}
function addZero(num){
if(num < 10){
num = '0'+num
}else{
num = num
}
return num
}
function closeModal(){
$(".ivu-modal-body").empty();
$("#ivu-modal-dialog").hide();
};
$(function(){
var page_url = '';
var req = new XMLHttpRequest();
req.open("get", page_url, true);
$("#total").css('display','none');
req.addEventListener("progress", function (evt) {
console.log(evt)
if (evt.lengthComputable) {
$("#total").css('display','block');
$("#loading1").css('display','none')
var percentComplete = Number((evt.loaded / evt.total).toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(percentComplete);
let bar = document.getElementById("bar")
console.log(bar)
if(bar != null && bar != 'bull'){
console.log(bar)
bar.style.width=(percentComplete * 100) + "%";
$("#total").html( Math.floor(percentComplete * 100) + "%");
}
if(percentComplete == 1){
setTimeout(function() {
//下载完成要执行的操作
}, 500);
}
}
}, false);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
var filename = params.noticeOrderNo+'_'+getTimeNow()+'.zip';
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([req.response], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([req.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
}
};
req.send();
})
</script>
</html>
效果图为：