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

Abhitalks · Accepted Answer · 2014-06-24 10:00:19Z

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.

edited Jun 24, 2014 at 10:00

answered Jun 24, 2014 at 9:49

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhitalks Over a year ago

Updated the answer with standard version along with -webkit- vendor prefix.

Suresh Ponnukalai · Accepted Answer · 2014-06-24 09:41:37Z

1

Keep your code under document load function.

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

answered Jun 24, 2014 at 9:41

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

1 Comment

Anju Aravind Over a year ago

thank you for answer. but i did the same. it make the preloader load after the page load.

mi200000 · Accepted Answer · 2022-09-12 06:11:27Z

0

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>

answered Sep 12, 2022 at 6:11

mi200000

13 bronze badges

1 Comment

jasie Over a year ago

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Preloader with css and jquery loader after page load

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related