页面加载完全前加loading

style

 .loading-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    opacity: 1;
    filter: Alpha(opacity=60);
    z-index: 9999;
}
.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height:200px;
    background: url(../images/loading3.gif) center center no-repeat;
}
 .loading-round {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 81px;
    height: 81px;
    background: url(http://demo.topjui.com/topjui/themes/default/images/loading-bg.png) center center no-repeat;
}

.loading-dot {
    width: 83px;
    height: 83px;
    background: url(http://demo.topjui.com/topjui/themes/default/images/loading-dot.png) center center no-repeat;
}
 .loading-dot, .loading-round {
    animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
} 
 

html
<div id="loading" class="loading-wrap">
    <div class="loading-content">
       <div class="loading-round"></div>
        <div class="loading-dot"></div> 
    </div>
</div>

 

 

javascript

// 首页加载完后，取消加载中状态

$(window).load(function () { $("#loading").fadeOut(); });

转载于:https://my.oschina.net/u/1263948/blog/2086098