How to correctly have a smooth preloader fade out

Admin 1
Viewed 93

I am using this script I found on the internet, but the fadeout is not working. I want a smooth fadeout.

var loader = document.getElementById('spinner');
window.addEventListener("load", function() {
  //Hide the spinner after 2 seconds
  setTimeout(function() {
    loader.style.display = 'none';
  }, 2000);
});

$("#spinner").fadeOut();
<section id="spinner">
  <div id="preloader">Loading...</div>
</section>

script jquery
1 Answers

To do what you require you need to include a reference to the jQuery.js script in the page, and you also need to call the fadeOut() line in the handler for the setTimeout(), so that it runs when the 2 seconds have elapsed. Try this:

window.addEventListener("load", function() {
  setTimeout(function() {
    $("#spinner").fadeOut();
  }, 2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="spinner">
  <div id="preloader">Loading...</div>
</section>

user_5194130
Related