LOADING

标签 css 下的文章

首先需要在body加上如下: 在即将离开当前页面(刷新或关闭)时执行 JavaScript

<style>

.loading{
   width: 80px;
   height: 40px;
   margin: 0 auto;
   margin-top:500px;
}
.loading span{
   display: inline-block;
   width: 8px;
   height: 100%;
   border-radius: 4px;
   background: lightgreen;
   -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
   0%,100%{
      height: 40px;
      background: lightgreen;
   }
   50%{
      height: 60px;
      margin-top: -20px;
      background: lightblue;
   }
}
.loading span:nth-child(2){
   -webkit-animation-delay:0.13s;
}
.loading span:nth-child(3){
   -webkit-animation-delay:0.26s;
}
.loading span:nth-child(4){
   -webkit-animation-delay:0.39s;
}
.loading span:nth-child(5){
   -webkit-animation-delay:0.52s;
}

</style>
<body onbeforeunload="return before()">

<div id="fugai" style="display: none; width: 100vw;min-height: 19999px; background: black; opacity: 0.5;position: fixed;top: 0px;z-index: 100;">
<div class="main">

  <div class="loading">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
  </div>

</div>
</div>
</body>
<script>

function before() {
    $('#fugai').show();
}
$(document).ready(function(){
    $('#fugai').hide();
});

</script>