我正在寻找预加载器页面动画的简单示例。我需要的是在白色背景上显示一个圆圈(一个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');
});
SCSS:
#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;
}
}
我不确定这是否正确,因为所有这些都是在 document.ready 之后触发的......
在这里,您可以看到JSFiddle demo。
答案 0 :(得分:1)
这不是实际加载,因为加载信息用于掩盖实际的Web内容加载。当DOM准备就绪时,Jquery文档就可以运行了。
您需要在网络内容准备就绪时停止动画,因此请添加此
$(window).ready(function(){
$('#loading').fadeOut();
$('main').fadeIn();
});