为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

效果图 :

教程开始

新建一个loading样式css
将以下代码放进去 然后引用这个文件

code

1. #Loadanimation{
      background-color:#fff;
      height:100%;
      width:100%;
      position:fixed;
      z-index:1;
      margin-top:0px;top:0px;
      
   }
   #Loadanimation-center{
      width:100%;
      height:100%;
      position:relative;
      
   }
   #Loadanimation-center-absolute{
      position:absolute;
      left:50%;
      top:50%;
      height:200px;
      width:200px;
      margin-top:-100px;
      margin-left:-100px;
      
   }
   .xccx_object{
      -moz-border-radius:50% 50% 50% 50%;
      -webkit-border-radius:50% 50% 50% 50%;
      border-radius:50% 50% 50% 50%;
      position:absolute;
      border-left:5px solid #87CEFA;
      border-right:5px solid #FFC0CB;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      -webkit-animation:animate 2.5s infinite;
      animation:animate 2.5s infinite;
      
   }
   #xccx_one{
      left:75px;
      top:75px;
      width:50px;
      height:50px;
      
   }
   #xccx_two{
      left:65px;
      top:65px;
      width:70px;
      height:70px;
      -webkit-animation-delay:0.1s;
      animation-delay:0.1s;
      
   }
   #xccx_three{
      left:55px;
      top:55px;
      width:90px;
      height:90px;
      -webkit-animation-delay:0.2s;animation-delay:0.2s;
      
   }
   #xccx_four{
      left:45px;
      top:45px;
      width:110px;
      height:110px;
      -webkit-animation-delay:0.3s;
      animation-delay:0.3s;
      
   }
   @-webkit-keyframes animate{50%{
      -ms-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      transform:rotate(180deg);
      
   }
   100%{-ms-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
      
   }
      
   }
   @keyframes animate{50%{
      -ms-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      transform:rotate(180deg);
      
   }
   100%{
      -ms-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg);
      
   }
   }

第二步：

将以下代码填写入头部文件 一般都为 header.php

code

1. <div id="Loadanimation" style="z-index:999999;">
   <div id="Loadanimation-center">
      <div id="Loadanimation-center-absolute">
          <div class="xccx_object" id="xccx_four"></div>
          <div class="xccx_object" id="xccx_three"></div>
          <div class="xccx_object" id="xccx_two"></div>
          <div class="xccx_object" id="xccx_one"></div>
      </div>
   </div>
   </div>
   <script>
   $(function(){
      $("#Loadanimation").fadeOut(540);
   });
   </script>

注意 注意 fadeOut 里面填写的是毫秒数

本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)