How to display a loading screen while site content loads with JavaScript?

Sometimes, we want to display a loading screen while site content loads with JavaScript.

In this article, we’ll look at how to display a loading screen while site content loads with JavaScript.

How to display a loading screen while site content loads with JavaScript?

To display a loading screen while site content loads with JavaScript, we can use the jQuery on method to watch for the load event to be emitted.

For instance, we write:

$(window).on('load', () => {
  $("#loader").fadeOut("fast");
});

to call select the window with $(window).

Then we call on with 'load' and a function that selects the div and call fadeOut on it to make it disappear with the fade out effect.

We call it with 'fast' to make it fade out fast.

Then we add some styles to the div by writing:

#loader {
  width: 100%;
  height: 100%;
  background-color: white;
  margin: 0;
}

Conclusion

To display a loading screen while site content loads with JavaScript, we can use the jQuery on method to watch for the load event to be emitted.