#loadingwrapper .loading-mask {
background: rgba(0,0,0,0.2);
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#loadingwrapper .loading-box-s {
position: fixed;
top: 100px;
left: 50%;
z-index: 5000;
width: 7.6em;
min-height: 7.6em;
margin-left: -3.8em;
text-align: center;
color: #fff;
background: #080915;
border-radius: 5px;
box-shadow: 0px 0px 30px 1px #103136 inset;
}
#loadingwrapper .loader-cicle {
position: relative;
width: 50px;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
border: 7px double #bd5837;
-webkit-animation: ball-turn 1s linear infinite;
animation: ball-turn 1s linear infinite;
}
#loadingwrapper .loading-text{
color: #c3c3c3;
}
#loadingwrapper .loader-cicle::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #bd5837;
border-radius: 50%;
bottom: 0;
right: 30px;
}
#loadingwrapper .loader-cicle::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #bd5837;
border-radius: 50%;
left: 30px;
top: 0;
}
@keyframes ball-turn {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}可用于手机端数据加载动画,带有遮罩层,因为使用css3属性,pc端低版本ie浏览器兼容可能会有问题。