I'm looking for a simple example of preloader page animation. What I need is to show a circle (an SVG image), on white background and centered on both axis, that rotates on the Y axis while the page is loading. I tried to look around the web, but I'm going crazy because there are too much tutorials.
Can any one help me to obtain this purpose?
Here's the code:
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;
}
}
I'm not sure if this is the correct way because all is triggered after document.ready...
Here you can see the JSFiddle demo.
This is not actual loading as loading aninmation is used to mask the actual web content loading . Jquery document ready runs when DOM is ready.
You need to stop animation when web content is ready so add this
$(window).ready(function(){
$('#loading').fadeOut();
$('main').fadeIn();
});