css上传图片中等待不可点击效果 

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

posted @ 2018-07-03 08:45  748573200000  阅读(890)  评论(0)  编辑  收藏  举报