记一次loading遮罩层的制作

css3实现loading效果：https://www.cnblogs.com/lianghong/p/8057676.html 

css3实现loading水平垂直居中

.loading{
     80px;
    height: 80px;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /*向左向上分别平移自身的一半*/
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    text-align: center;
    transition: 1s;
    -webkit-animation: load 3s linear infinite;
}
.loading div{
     100%;
    height: 100%;
    position: absolute;
}
.loading span{
    display: inline-block;
     20px;
    height: 20px;
    border-radius: 50%;
    background: #99CC66;
    position: absolute;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    -webkit-animation: changeBgColor 3s ease infinite;
}
@-webkit-keyframes load{
    0%{
        -webkit-transform: rotate(0deg);
    }
    33.3%{
        -webkit-transform: rotate(120deg);
    }
    66.6%{
        -webkit-transform: rotate(240deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes changeBgColor{
    0%,100%{
        background: #99CC66;
    }
    33.3%{
        background: #FFFF66;
    }
    66.6%{
        background: #FF6666;
    }
}
.loading div:nth-child(2){
    -webkit-transform: rotate(120deg);
}
.loading div:nth-child(3){
    -webkit-transform: rotate(240deg);
}
.loading div:nth-child(2) span{
    -webkit-animation-delay: 1s;
}
.loading div:nth-child(3) span{
    -webkit-animation-delay: 2s;
}

利用bootstrap modal实现遮罩层

<!-- loading模态框（Modal） -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
         data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style=" 100%; height: 100%">
        <div class="loading">
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
        </div>
    </div><!-- /.modal -->
</div>

不让modal点击空白关闭和ESC键盘按钮关闭

添加这两个属性: data-backdrop="static" data-keyboard="false"