CSS开发等待效果

分享两个等待效果：

第一个：旋转的圆圈

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()
        
    }
});