普通loading框
<div id="loading">
<div class="sDiv">
<div class="loading"></div>
<p class="loadingText">正在加载...</p>
</div>
</div>
#loading{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: column;
align-items: center;
padding: 7%;
border-radius: 15px;
background: rgba(0,0,0,0.7);
}
.loading{
border: 3px solid rgba(255,255,255,0.5);
border-top-color: #E0E0E0;
border-radius: 50%;
width: 3em;
height: 3em;
animation: spin 1s linear infinite;
}
.loadingText{
font-size: 14px;
color: #fff;
margin-top: 10%;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
逼格高一点儿
<div id="loading">
<div class="dots">
<div class="loadingDiv">
<div></div>
<div></div>
<div></div>
</div>
<p class="loadingText">加载中...</p>
</div>
</div>
#loading{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: column;
align-items: center;
padding: 7%;
border-radius: 15px;
background: rgba(0,0,0,0.7);
}
.loadingDiv {
width: 50px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.loadingDiv div {
width:10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
animation: fade 0.8s ease-in-out alternate infinite;
}
.loadingDiv div:nth-of-type(1) {
animation-delay: -0.4s;
}
.loadingDiv div:nth-of-type(2) {
animation-delay: -0.2s;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
逼格高一点儿
网友评论