Html 页面载入内容前，显示 loading 效果。

Html 内容 loading部分：

   <div id="sys-loading" class=""><div class="spinner">
    <div class="loader-inner line-scale-pulse-out-rapid">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    </div></div>

 

CSS 展示效果：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

/* loading */ #sys-loading {     position: fixed;     left: 0;     top: 0;     right: 0;     bottom: 0;     z-index: 10000000;     background-color: hsla(0,0%,100%,.93);     opacity: 1 }   #sys-loading.finished {     opacity: 0 }   #sys-loading .spinner {     position: fixed;     top: 50%;     left: 50%;     margin: -30px auto auto -15px;     /*width: 200px;     height: 100px;*/     font-size: 10px }   #sys-loading .spinner .rect2 {     -webkit-animation-delay: -1.1s;     animation-delay: -1.1s }   #sys-loading .spinner .rect3 {     -webkit-animation-delay: -1s;     animation-delay: -1s }   #sys-loading .spinner .rect4 {     -webkit-animation-delay: -.9s;     animation-delay: -.9s }   #sys-loading .spinner .rect5 {     -webkit-animation-delay: -.8s;     animation-delay: -.8s }   @-webkit-keyframes stretchdelay {     0%,40%,to {         -webkit-transform: scaleY(.6);         transform: scaleY(.6)     }       20% {         -webkit-transform: scaleY(1);         transform: scaleY(1)     } }   @keyframes stretchdelay {     0%,40%,to {         transform: scaleY(.6);         -webkit-transform: scaleY(.6)     }       20% {         transform: scaleY(1);         -webkit-transform: scaleY(1)     } }   @-webkit-keyframes finishanim {     0% {         opacity: 1     }       99% {         opacity: 0     }       to {         display: none     } }   /* --------------- loading -1  ---------------------  */ @-webkit-keyframes line-scale-pulse-out-rapid {   0% {     -webkit-transform: scaley(1);             transform: scaley(1); }     80% {     -webkit-transform: scaley(0.3);             transform: scaley(0.3); }     90% {     -webkit-transform: scaley(1);             transform: scaley(1); } }   @keyframes line-scale-pulse-out-rapid {   0% {     -webkit-transform: scaley(1);             transform: scaley(1); }     80% {     -webkit-transform: scaley(0.3);             transform: scaley(0.3); }     90% {     -webkit-transform: scaley(1);             transform: scaley(1); } }   .line-scale-pulse-out-rapid > div {   background-color: #67CF22;   width: 4px;   height: 35px;   border-radius: 2px;   margin: 2px;   -webkit-animation-fill-mode: both;           animation-fill-mode: both;   display: inline-block;   -webkit-animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);           animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78); }   .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) {     -webkit-animation-delay: 0.25s !important;             animation-delay: 0.25s !important; }   .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) {     -webkit-animation-delay: 0.5s !important;             animation-delay: 0.5s !important; }

 延迟间隔 关闭loading

document.onreadystatechange = subSomething;
function subSomething() {
    //当页面加载状态
    if (document.readyState == "complete") {
        //延迟一秒关闭loading
        $('#sys-loading').delay(1300).hide(0);
        $('.spinner').delay(1300).fadeOut('slow');
    }
}