首先提到一点，就是html加载顺序的问题。想必了解html的人都知道，html是按从上到下的顺序渲染页面的。

那么想要页面在加载的过程中就能显示loading，那么loading放置的位置在body内的开始是最合适不过的了。

    
      
      
     
           此部分先渲染  
       
      
            内容区后渲染 
      
     
    

那么想要页面在加载的过程中只显示Loading，那么我们可以把内容区先隐藏:

    
      .content{  display: none; }
    

当页面完全加载完成后，再隐藏loader，显示content：

$(window).load(function(){   setTimeout(function(){    $(".loader").hide();    $(".content").show();   },1000);  });

那么整个过程借助jq，实现后就是：

    
     
     
      .loader { position: fixed; width: 100%; height: 100%; background-color: gray;}.loader > p{ width:180px; margin-left: 50%; left: -180px; font-size: 25px; margin-top: 25%;}.content { display: none;} 
       
      
         
       
加载中……
  
        
       
        内容区 
        
          
         
            $(window).load(function(){   setTimeout(function(){    $(".loader").hide();    $(".content").show();   },1000);  }); 
         
        
       
      
     
    

当然，以上只是一种实现思路。那么想要把Loading设计得大气一点，就得花点心思在css上了。

下面送上一款个人的收藏：

    
     
     
      body{ background: #C0FF3E;}#loader-wrapper {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;}#loader {    display: block;    position: relative;    left: 50%;    top: 50%;    width: 150px;    height: 150px;    margin: -75px 0 0 -75px;    border-radius: 50%;    border: 3px solid transparent;    border-top-color: #3498db;    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */    z-index: 1001;}#loader:before {    content: "";    position: absolute;    top: 5px;    left: 5px;    right: 5px;    bottom: 5px;    border-radius: 50%;    border: 3px solid transparent;    border-top-color: #e74c3c;    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}#loader:after {    content: "";    position: absolute;    top: 15px;    left: 15px;    right: 15px;    bottom: 15px;    border-radius: 50%;    border: 3px solid transparent;    border-top-color: #f9c922;    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}@-webkit-keyframes spin {    0%   {        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */       -ms-transform: rotate(0deg);  /* IE 9 */       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */    }    100% {       -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */       -ms-transform: rotate(360deg);  /* IE 9 */       transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */    }}@keyframes spin {    0%   {        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */       -ms-transform: rotate(0deg);  /* IE 9 */       transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */    }    100% {       -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */       -ms-transform: rotate(360deg);  /* IE 9 */       transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */    }}#loader-wrapper .loader-section {    position: fixed;    top: 0;    width: 51%;    height: 100%;    background: #FF00FF;    z-index: 1000;}#loader-wrapper .loader-section.section-left {    left: 0;}#loader-wrapper .loader-section.section-right {    right: 0;}/* Loaded styles */.loaded #loader-wrapper .loader-section.section-left {    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */    -ms-transform: translateX(-100%);  /* IE 9 */    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */}.loaded #loader-wrapper .loader-section.section-right {    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */    -ms-transform: translateX(100%);  /* IE 9 */    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */}.loaded #loader {    opacity: 0; -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */    transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */}.loaded #loader-wrapper {    visibility: hidden; -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */    -ms-transform: translateY(-100%);  /* IE 9 */    transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */    -webkit-transition: all 0.3s 1s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */    transition: all 0.3s 1s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */}.content { display: none;} 
       
      
           
       
             
        
             
         
             
           
          
           内容区 
           
             
            
               $(window).load(function(){   setTimeout(function(){    $("body").addClass("loaded");    $(".content").show();   },50);  }); 
            
           
          
         
        
       
      
     
    

转载请注明出处！