<!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即可。