CODEWITHSUNDEEP
javascriptjquerycssonloadpreloader
Anju Aravind
Anju Aravind

Reputation: 3362

Preloader with css and jquery loader after page load

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!!

Upvotes: 2

Views: 2757

Answers (3)

mi200000
mi200000

Reputation: 1

With Bootstrap, Jquery, CSS

<style>
 .overlay {
    position: absolute; background-color: white; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 10;
}
    .overlay div{ position: relative; z-index: 10; top:30%; left: 50%;}
</style>

HTML

<body>
<div class="overlay">
    <div class="spinner-border text-secondary" >
        <span class="sr-only">Loading...</span>
    </div>
</div>

<div> Helloo World</div>
</body>

JQuery

<script>
$(window).on('load', function(){
    $( ".overlay" ).fadeOut(100, function() {
        $( ".overlay" ).remove();
    });
});
</script>

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

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.

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Keep your code under document load function.

$(document).load(function(){
  $('.la-anim-1').addClass('la-animate');
});

Upvotes: 1

Related Questions