分享两个等待效果:
第一个:旋转的圆圈
html
<div class="loading-box">
<div class="loading-spinner"></div>
<div class="loading-text">正在加载...</div>
</div>
css
.loading-box {
width: 200px;
height: 100px;
position: relative;
margin: 0 auto;
text-align: center;
border-radius: 48px;
background: white;
box-shadow: 23px 23px 57px #989898,
-23px -23px 57px #ffffff;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #ccc;
border-top-color: #666;
border-radius: 50%;
position: absolute;
left: 50%;
top: 10%;
transform: translateX(-50%);
animation: spin 1.5s infinite linear;
}
.loading-text {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
@keyframes spin {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}
第二个:跳动的圆点
html
<div class="loading-box">
<div class="loading-dots">
<div></div>
<div></div>
<div></div>
</div>
<div class="loading-text">正在加载...</div>
</div>
css
.loading-box {
width: 200px;
height: 100px;
position: relative;
margin: 0 auto;
text-align: center;
border-radius: 48px;
background: white;
box-shadow: 23px 23px 57px #989898,
-23px -23px 57px #ffffff;
}
.loading-dots {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
}
.loading-dots div {
width: 16px;
height: 16px;
margin: 3px;
border-radius: 50%;
background-color: #ccc;
animation: jump 1s infinite ease-in-out;
}
.loading-dots div:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots div:nth-child(3) {
animation-delay: 0.4s;
}
.loading-text {
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
100% {
transform: translateY(0);
}
}
使用的时候就简单了,在你需要的地方,给body标签添加动态标签就行,比如我要后台交互用的Ajax,那我的核心代码如下
$.ajax({
type: "POST",
url: "/pdf/appdftodocx",
data: formData,
processData: false,
contentType: false,
beforeSend: function () {
//beforeSend是Ajax的钩子函数用来处理发请求前干什么在这里追加顶戴效果
$("body").append("")
},
success: function (data) {
//结果收到后就可以删除动态添加的等待效果
$("#wait").remove()
},
error: function (data) {
$("#wait").remove()
}
});