How to set a loading time of the website

[Marius]

I've a website loader in GIF format but it doesn't appear because the page is loaded in 0.01 seconds.
Is there possible to set a loading time to 2 seconds to display the loader animation?

Here is an example of a preloader with jQuery using the delay() method (2 sec = 2000), wrapped inside the 'load' event.

Code: Select all

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class='loading'>
  <img src='your_image.gif'>
</div>

<div>Content of the page.</div>

<script>
$(window).on('load', function() {
  $('.loading').delay(2000).fadeOut(500);
});
</script>