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"