CODEWITHSUNDEEP
jqueryhtmlcss
sam orten
sam orten

Reputation: 206

How to stop loader after some time?

I have created a website where I load an SVG image before the website loads. It works perfectly but the problem is that the loader image is not stopping and if I remove class="loader-bg" then the website does not load properly. How can I solve this issue? Please help me.

<div class="loader-bg"></div>

.loader-bg {
  background: #ffffff url(../images/loader.svg) no-repeat center center;
}
.loader-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
}

Upvotes: 1

Views: 6652

Answers (5)

Maytha8
Maytha8

Reputation: 866

You can use jQuery's document.onload shortcut and then set the display of the loader to none with jQuery's .css() function.

Using $(function() {...});

$(function() {
  $("#loader").css("display", "none");
});
#loader {
  width: 50vw;
  height: 50vh;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-top: 25vh;
  padding-bottom: 25vh;
  background-color: skyblue;
  color: white;
  text-align: center;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loader">Loading</div>
The document has loaded

Using $(document).ready(function() {...});

$(document).ready(function() {
  $("#loader").css("display", "none");
});
#loader {
  width: 50vw;
  height: 50vh;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-top: 25vh;
  padding-bottom: 25vh;
  background-color: skyblue;
  color: white;
  text-align: center;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loader">Loading</div>
The document has loaded

Upvotes: -1

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

There can be two ways:

First is that you wait for some response and then remove loader. 

success: 
    $('.loader-bg').css('display', 'none');

Second is that you set some seconds like after 5 seconds it will be removed. 

setTimeout(function(){ 
    $('.loader-bg').css('display', 'none');
}, 5000); // it will remove after 5 seconds

Upvotes: 2

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

Try to hide the div after the page loading complete

Css :

.hide{
display:none
}

JQuery:

$('.loader-bg').addClass('hide');

or

$('.loader-bg').css('display','none');

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 736

What you have done is,

  • Added a permanent element to the page which you want.

What you want is,

  • A temporary element which disappears once the page has been loaded(if I understand correctly.)

I think best bet would be to remove that element entrirely from the page after a set amount of time, or a trigger(like document.load), or just overlap that element with some other element which hides it, or hide that element using opacity:0.01 with animation-duration: 1.5s (or whatever you like) so it fades away using JavaScipt.

I will help us better if you can give more input though.

Upvotes: 0

Rishabh
Rishabh

Reputation: 1213

Use different readyStates to remove loader class when page is loaded.

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    //Remove loader class from div
  }
}

Upvotes: 0

Related Questions