CODEWITHSUNDEEP
jquerycsspreloader
lean2016
lean2016

Reputation: 103

Why the preloader doesn't dissapear?

I am loading a page inside a #section and the page is around 450kb, so I'm trying to install a preloader.

The problem is that the preloader never disappears and I'm not sure if I'm using the right the code. I've got the CSS code in another file, and inside the heavy HTML which is loaded in the section of my index I am placing the script until the head ends, and the #preloader div is at the beginning of the body.

The questions are, in first place are the codes where they should be? And why does it not work?

<script type="text/javascript">
  $(window).load(function () {
          $('#preloader').delay(2500).fadeOut('slow');
          $('body').delay(2500).css({
              'overflow': 'visible'
          });
      })
</script>
body {
  overflow: hidden;
}
#preloader {
  position: absolute;
  width: 100%;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-45%);
}
.spinner div {
  width: 12px;
  height: 12px;
  position: absolute;
  left: -20px;
  border-radius: 50%;
  animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
}
.spinner div:nth-child(2) {
  animation-delay: 150ms;
}
.spinner div:nth-child(3) {
  animation-delay: 300ms;
}
.spinner div:nth-child(4) {
  animation-delay: 450ms;
}
@keyframes move {
  0% {left: 0%;}
  75% {left:100%;}
  100% {left:100%;}
}
<div id="preloader">
  <div class="spinner">
    <div style="background-color:#f48fb1"></div>
    <div style="background-color:#e91e63"></div>
    <div style="background-color:#f8bbd0"></div>
    <div style="background-color:#f06292"></div>
  </div>
</div>

Upvotes: 0

Views: 510

Answers (2)

lean2016
lean2016

Reputation: 103

I solved the problem by hiddin the overflow and showing the loader in the prev page when I click the link, and when the new page loads the preloader automatically dissapears!

Thanks to all for your knowledge that makes me continue learning.

Upvotes: 0

Sa Si Kumar
Sa Si Kumar

Reputation: 662

try $(document).ready() instead of $(window).load()

$(document).ready(function() {
  $('#preloader').delay(2500).fadeOut('slow');
  $('body').delay(2500).css({
    'overflow': 'visible'
  });
})

Upvotes: 1

Related Questions