• 我有一个强迫症,那就是使用 Ajax 加载页面时不希望用户看到 DOM Change 的过程,在部分机子上你会觉得页面“闪”了一下,所以就需要一个炫酷吊炸天的动画来掩盖它。

    首先在网页上增加以下代码:

    <div id="loader" style="z-index:99999;" class="pageload-overlay" data-opening="M 40 -21.875 C 11.356078 -21.875 -11.875 1.3560784 -11.875 30 C -11.875 58.643922 11.356078 81.875 40 81.875 C 68.643922 81.875 91.875 58.643922 91.875 30 C 91.875 1.3560784 68.643922 -21.875 40 -21.875 Z">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice">                    <path d="M40,30 c 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 Z"/></svg>
    </div>
    

    SVG 用于描述二维矢量图形的一种图形格式,当然它的性能也是不错的。

    在CSS文件中增加以下代码:

    /* 动画选项 */
    .animated {
        -webkit-animation-duration: .5s;
        -moz-animation-duration: .5s;
        -o-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        animation-fill-mode: both
    }
    
    .container {
        display: none;
    }
    
    .container.show {
        display: block;
    }
    /* 覆盖页面 */
    .pageload-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        visibility: hidden;
    }
    
    .pageload-overlay.show {
        visibility: visible;
    }
    
    .pageload-overlay svg {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    
    .pageload-overlay svg path {
        fill: #fff;
    }
    
    .pageload-overlay::after,
    .pageload-overlay::before {
        content: '';
        position: fixed;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        margin: -10px 0 0 -10px;
        border-radius: 50%;
        visibility: hidden;
        opacity: 0;
        z-index: 1000;
        -webkit-transition: opacity 0.15s, visibility 0s 0.15s;
        transition: opacity 0.15s, visibility 0s 0.15s;
    }
    
    .pageload-overlay::after {
        background: #6cc88a;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        -webkit-animation: moveRight 0.6s linear infinite alternate;
        animation: moveRight 0.6s linear infinite alternate;
    }
    
    .pageload-overlay::before {
        background: #4fc3f7;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        -webkit-animation: moveLeft 0.6s linear infinite alternate;
        animation: moveLeft 0.6s linear infinite alternate;
    }
    
    @-webkit-keyframes moveRight {
        to { -webkit-transform: translateX(20px); }
    }
    
    @keyframes moveRight {
        to { transform: translateX(20px); }
    }
    
    @-webkit-keyframes moveLeft {
        to { -webkit-transform: translateX(-20px); }
    }
    
    @keyframes moveLeft {
        to { transform: translateX(-20px); }
    }
    
    .pageload-loading.pageload-overlay::after,
    .pageload-loading.pageload-overlay::before {
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    
    .copyright p{
        line-height: 1.2em;
    }
    

    然后在网页中引入 Snap.SVG 和 SVGLoader (修改版)

    点我查看

    在页面的JS中初始化一个 SVGLoader 对象

    loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 300, easingIn : mina.easeinout } );
    

    在需要显示加载画面的地方执行:

    loader.show(function(){ //动画加载完成后的代码 })
    

    需要隐藏的地方

    loader.hide()
    

    Code by codrops.com