1、预备素材:
2、html元素:
<div class="mask-loading" id="js-mask-loading" style="">
<div class="new-loading"> 请稍侯.. </div>
<!-- <div class="css-loading"><p></p></div> -->
</div>
3、css样式:
.mask-loading {
width: 100%;
min-height: 100%;
text-align: center;
top: 0;
bottom: 0;
position: fixed;
opacity: 0.8;
z-index: 100;
}
.new-loading {
width: 3rem;
height: 3.6rem;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.6);
overflow: hidden;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding-top: 2.7rem;
line-height: 0.9rem;
text-align: center;
color: #fff;
font-size: 0.6rem;
}
.new-loading:before {
position: absolute;
display: block;
content: "";
width: 100%;
height: 2.7rem;
left: 0;
top: 0;
background: url() no-repeat center center;
background-size: 100%;
animation: load 1s linear infinite;
-webkit-animation: load 1s linear infinite;
}
@keyframes load {
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(180deg);
}
100%{
transform:rotate(360deg);
}
}
@-webkit-keyframes load{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(180deg);
}
100%{
transform:rotate(360deg);
}
}
4、相应的加载完成以后,隐藏该元素,适当的时候增加模板背景。