How to correctly have a smooth preloader fade out-CodePudding

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>

CodePudding user response：

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>