Preloader with css and jquery loader after page load

Question

hi am tying to make a preloader for my site with css and jQuery. here is the fiddle.It is working perfectly. But the problem is i need this to work before page load. now preloader is working after the page is loaded.

$('.la-anim-1').addClass('la-animate');

just need to run the script before page load.help..

cheers thanks!!

Answer 1

The way you are applying your CSS won't work in this scenario. You need keyframes animation. The idea is to start the animation on the element as soon as it is rendered, and then when the page load is complete, stop it by removing the class (and better still removing the element itself).

Demo: http://jsfiddle.net/abhitalks/KWh5d/6/

Start the element with the class applied:

<div class="la-anim-1 la-animate"></div>

Add this to your CSS:

@-webkit-keyframes preloader {
  0%   { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0%, 0, 0); }
}
@keyframes preloader {
  0%   { opacity: 0; transform: translate3d(-100%, 0, 0); }
  100% { opacity: 1; transform: translate3d(0%, 0, 0); }
}

And then add this animation to your .la-anim-1.la-animate class:

.la-anim-1.la-animate {
    -webkit-animation: preloader 5s infinite;
    animation: preloader 5s infinite;
}

And then, your jQuery inside DOM ready:

$('.la-anim-1').removeClass('la-animate');

And better still, remove the element itself:

$('.la-anim-1').remove();

Edit: Added standard along with -webkit- vendor prefix. Please add other vendor prefixes as needed.