为网页增加 Ajax 加载特效

 查看演示  website  立即下载

我这边用的是IE11，chrome 39.0.2171.95 m，做的测试没有问题

========以下内容由 Mr.li√ 提供====================

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

<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()

PREVIOUS:
NEXT:
美的让人窒息的后台模板
jquery延时载入动画焦点图