代码之家 › 专栏 › 技术社区 › Daniele

预加载程序页面动画

preloader jquery

0

Daniele · 技术社区 · 9 年前

我正在寻找一个预加载页面动画的简单示例。我需要的是在白色背景上显示一个圆(SVG图像),以两个轴为中心,在加载页面时,该圆在Y轴上旋转。我试着在网上四处看看,但我快疯了,因为有太多的教程。

有人能帮我达到这个目的吗?

代码如下:

HTML格式:

<div class="main-content">Web site content</div>
<div id="loading">
    <div class="loadingDiv">Loading</div>
</div>

JS文件:

$(document).ready(function () {

    $('.loadingDiv').animate({
         opacity: '1'
    });

    $('.loadingDiv').animate({
        rotation: 720
    }, {
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotateY(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotateY(' + now + 'deg)');
            $(this).css('transform', 'rotateY(' + now + 'deg)');
        },
        duration: 3000,
        complete: function () {
            $('#loading').fadeOut();
            $('main').fadeIn();
        }
    }, 'easeInOutQuint');
});

scs:

#loading {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;

.loadingDiv {
    background: #2a2a2a;
    border-radius: 50%;
    color: #FFFFFF;
    opacity: 0;
    height: 200px;
    left: 50%;
    line-height: 200px;
    margin: -100px 0 0 -100px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 200px;

}

}

我不确定这是不是正确的方式,因为这一切都是在 文档准备就绪 ...

在这里,您可以看到 JSFiddle demo .

1 回复 | 直到 9 年前

1

lakshya_arora 9 年前

这不是实际加载,因为加载信息用于掩盖实际的web内容加载。当DOM就绪时,Jquery文档就绪运行。

当web内容准备就绪时,您需要停止动画,因此添加此

$(window).ready(function(){
     $('#loading').fadeOut();
     $('main').fadeIn();
});

https://jsfiddle.net/rxxf6kge/3/