html：

<div class="loading "><div class="loading2"><div class="loader">
  <div class="segment-holder">
    <div class="segment one"></div>
  </div>
  <div class="segment-holder">
    <div class="segment two"></div>
  </div>
  <div class="segment-holder">
    <div class="segment three"></div>
  </div>
  <div class="segment-holder">
    <div class="segment four"></div>
  </div>
</div>
<br>
<div id="loading_text" style="text-align:center;"><p style="text-align:center;">东西有点多,服务器有点吃力~骚等一下~(๑•́ ₃ •̀๑)</p><p style="text-align:center;">
	<span id="loadingClose"><strong><a href="javascript:void(0);" style="color:#00D5FF !important;font-size:16px;">不等了,点我关闭层(╯‵□′)╯︵┻━┻</a></strong></span> </p></div>  </div>
</div>

css代码：

* {
  box-sizing: border-box;
}
 
body {
  background: white;
}
 
.loader {
  height: 150px;
  width: 150px;
  margin: 0 auto;
  margin-top: 75px;
  transform: rotate(-45deg);
  font-size: 0;
  line-height: 0;
  animation: rotate-loader 5s infinite;
  padding: 25px;
  border: 1px solid teal;
}
 
.segment-holder {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 50%;
}
 
.segment {
  position: absolute;
  background: teal;
}
 
.one {
  bottom: 0;
  height: 0;
  width: 100%;
  animation: slide-one 1s infinite;
}
 
.two {
  left: 0;
  height: 100%;
  width: 0;
  animation: slide-two 1s infinite;
  animation-delay: 0.25s;
}
 
.three {
  right: 0;
  height: 100%;
  width: 0;
  animation: slide-two 1s infinite;
  animation-delay: 0.75s;
}
 
.four {
  top: 0;
  height: 0;
  width: 100%;
  animation: slide-one 1s infinite;
  animation-delay: 0.5s;
}
 
@keyframes slide-one {
  0%    { height: 0;    opacity: 1; }
  12.5% { height: 100%; opacity: 1; }
  50%   { opacity: 1; }
  100%  { height: 100%; opacity: 0;}
}
 
@keyframes slide-two {
  0%    { width: 0;    opacity: 1; }
  12.5% { width: 100%; opacity: 1; }
  50%   { opacity: 1; }
  100%  { width: 100%; opacity: 0;}
}
 
@keyframes rotate-loader {
  0%   { transform: rotate(-45deg); }
  20%  { transform: rotate(-45deg); }
  25%  { transform: rotate(-135deg); }
  45%  { transform: rotate(-135deg); }
  50%  { transform: rotate(-225deg); }
  70%  { transform: rotate(-225deg); }
  75%  { transform: rotate(-315deg); }
  95%  { transform: rotate(-315deg); }
  100% { transform: rotate(-405deg); }
}
.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:4500;background-color:rgba(90,90,90,.6)}.loading2{position:absolute;top:30%;left:30%;z-index:1000;margin:-46px 0 0 -46px;width:600px;height:92px;}
#loading_text{  margin-top: 0px;    color: yellow;}