利用css實現頁面加載時旋轉動畫

有時瀏覽一些網站時在剛加載頁面時候會出現一個滾動動畫如下圖,特別是對於一些移動端的站點或者混合應用來說應該用戶體驗會好很多，扒了下頁面發現是用css樣式控制的，於是把頁面以及css樣式賦值了下來，

html如下

<div id="page-loader" class="fade in"><span class="spinner"></span></div>

css樣式如下

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg)
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg)
    }

    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg)
    }

    to {
        -o-transform: rotate(359deg)
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}
.fade.in {
    filter: alpha(opacity=100);
}
.fade.in {
    opacity: 1;
}
.fade {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
    .fade.in .spinner, .fade.in .spinner-small {
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
}
.spinner{
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px -20px 0 0;
    border: 2px solid #fff;
    border-top: 2px solid #24B498;
    border-radius: 100%;
}
        #page-loader.fade.in {
    display: block;
}
#page-loader.fade {
    display: none;
}
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #E6E8EC;
}

效果就出來了，不過別忘了頁面加載完后隱藏額，不然會一直轉到天亮，根本停不下來！

document.getElementById('page-loader').className='fade'
jQuery代碼如下
$('#page-loader').removeClass('in');

 

這樣頁面加載或者異步提交表單時時不時感覺好多了？不管你信不信，反正我信了