<!DOCTYPE html>
<html>
<head>
<title>上传中</title>
<style type="text/css">
.dong-hua {
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
font-size: 50px;
}
.dong-hua-chuan {
text-align: center;
font-size: 26px;
margin-top: 330px;
color: #ffffff;
}
.loader-05 {
width: 1em;
height: 1em;
border: .2em solid transparent;
border-top-color: currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-05 linear infinite;
animation: 1s loader-05 linear infinite;
position: relative;
display: block;
margin: 0 auto;
margin-top: 15px;
} .loader-05:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -.2em;
left: -.2em;
border: .2em solid currentcolor;
border-radius: 50%;
opacity: .5;
} @-webkit-keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} @keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="dong-hua">
<p class="dong-hua-chuan">上传中</p >
<div class="loader-05">
</div>
</div>
</body>
</html>
//默认给.dong-hua加上display:none;属性，源代码中没加，然后放入静态页中任意位置。点击上传按钮时将display改为block，
注意动画div给定的z-index值应该设为最大，保证其他页面事件不会触发，然后上传结束
status返回200时将display改为none即可。