How to set a minimal duration for my page loader in html?

Question

I'm trying to set up a page loader for my website. Every time a user loads another page it will show the page loader until the page is done loading.

But for most of the cases, the web load so fast, and the page loader isn't shown. I tried to use setTimeout for 5 seconds but it make the loader show endlessly.

Anyone know how to fix this?

Here's my code:

$(document).ready(function(){
setTimeOut(()=> {
$('.loader').remove();
} , 5000); // after 5 sec it will remove.
});

/*Loading Screen*/
.loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color:#221e1e;
z-index: 99;
text-align: center;
}

.loader img {
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 45%;
z-index: 100;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
  <img src="img/logo/logo1.png" width="200px" height="75px">
</div>

First time I see someone complaining that their pages load too fast... — Salketer, May 03 '21 at 14:05

Erfan Bahramali · Accepted Answer · 2021-05-03T14:13:32.823

1

javascript is Case Sensitive language

So it is sensitive to the letters uppercase and uppercase

The letter o is a large setTimeOut function that must be small, ie: setTimeout

$(document).ready(function(){
    setTimeout(()=> {
        $('.loader').remove();
    } , 5000); // after 5 sec it will remove.
});

/*Loading Screen*/
.loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color:#221e1e;
z-index: 99;
text-align: center;
}

.loader img {
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 45%;
z-index: 100;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
  <img src="img/logo/logo1.png" width="200px" height="75px">
</div>

It is also good to know these things:

The loader is usually installed when the screen is not fully loaded

$(document).ready(function () {

}

ready() Runs when the page is fully loaded You can write your loader outside of this function

Please read the following links:

https://api.jquery.com/ready/

Adding a page loader using jQuery

How to do jquery code AFTER page loading?

Description: Specify a function to execute when the DOM is fully loaded.

You can also use the following plugin for the loader

https://plugins.jquery.com/loader/

edited May 03 '21 at 14:13

answered May 03 '21 at 13:38

Erfan Bahramali

392
3
13

Thanks for the explanation, so should I just add the timer on my css ? is it better ? – Kim San May 03 '21 at 13:44
You do not need a timer for the loader In jquery, the ready() function is executed whenever the page is fully loaded So by running this function you are sure that the page is fully loaded and you can delete your loader in that function – Erfan Bahramali May 03 '21 at 13:50
oh I see, but my client want to at least show loader for about 2-3 seconds even though the page is fully loaded, can u help me to do that ? Thanks before – Kim San May 03 '21 at 13:54
No problem, you can remove the loader a few seconds later – Erfan Bahramali May 03 '21 at 13:59
how can I do that? by adding duration through the css ? sorry for asking so much. I'm new – Kim San May 03 '21 at 14:03
I put the correct code in the answer, see it – Erfan Bahramali May 03 '21 at 14:05
Oh finally it works, Thankyou all for the help. Cheers – Kim San May 03 '21 at 14:25

How to set a minimal duration for my page loader in html?

1 Answers1