頁面預加載loading動畫

在現在網速跟設備都跟得上的情況下、使用預加載圖片感覺效果不大，我們需要做的只是增強用戶體驗，在加載完成之前加個動畫，簡單粗暴。網上扒的一篇文章 
查看原文：http://www.ibloger.net/article/401.html 
效果頁面：http://crusader12.com/C12HoverAlls/ 


首先定義一個loader.css文件，如下內容 

.chromeframe { 
    margin: 0.2em 0; 
    background: #ccc; 
    color: #000; 
    padding: 0.2em 0;} 
#loader-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index:999999;} 
#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; 
    /* COLOR 1 */ 
    border-top-color: #FFF; 
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    -o-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; 
        /* COLOR 2 */       
        border-top-color: #FFF; 
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
        -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
        -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
        -ms-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: #FFF; 
        /* COLOR 3 */       
        -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
        -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
        -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */         
        -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: #1abc9c; /* Old browsers */ 
        z-index: 1000; 
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */ 
        -ms-transform: translateX(0);  /* IE 9 */ 
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */} 
#loader-wrapper .loader-section.section-left {left: 0;} 
#loader-wrapper .loader-section.section-right {right: 0;} 

/* Loaded */ 
.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);   
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);} 
.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);   
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);} 
.loaded #loader { 
        opacity: 0; 
        -webkit-transition: all 0.3s ease-out;   
                transition: all 0.3s ease-out;} 
.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;   
                transition: all 0.3s 1s ease-out;} 
/* JavaScript Turned Off */ 
.no-js #loader-wrapper {display: none;} 
.no-js h1 {color: #222222;} 
#loader-wrapper .load_title { 
    font-family:'Open Sans'; 
    color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; } 
#loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;} 



第二步：在網站頁面header標簽和body標簽加入以下代碼 


// 引入jquery 
<!--頁面加載start--> 
<link rel="stylesheet" type="text/css" href="css/loader.min.css"> 

<script type="text/javascript">         
    // 等待所有加載 
    $(window).load(function(){ 
        $('body').addClass('loaded'); 
        $('#loader-wrapper .load_title').remove(); 
    }); 
</script>     

<div id="loader-wrapper"> 
    <div id="loader"></div> 
    <div class="loader-section section-left"></div> 
    <div class="loader-section section-right"></div> 
    <div class="load_title">正在加載LoveFeel站點 
<span>V1.0</span></div> 
</div> 
<!--頁面加載end--> 

完工！ 
查看原文：http://www.ibloger.net/article/401.html