CODEWITHSUNDEEP
javascriptjquerybootstrap-4
Joehat
Joehat

Reputation: 1129

using fadeOut() or hide() to fade/hide Bootstrap 4 spinner/loader when browser window is completely loaded

THE AIM

I would like to show a spinner/loader until the window of the browser loads completely and after that, it must fade/hide.

ATTEMPTS

I've tried a jQuery code suggested in another question (How to show Page Loading div until the page has finished loading?) which is shown below. Additionally, I've also tried not using Bootstrap and use https://projects.lukehaas.me/css-loaders instead as suggested in the same question.

THE PROBLEM

None of the above gives me the result that I need as the spinner/loader shows above the content of my page and doesn't fade/hide.

SUMMARY

I would like to know what I might be missing.

Thanks for your help!

$(window).load(function() {
  //$(".spinner-border").fadeOut("slow");
  $(".spinner-border").hide();
});
.images {
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

.spinner-border {
  color: #d4d4d4;
  width: 8rem;
  height: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="spinner-border"></div>

<h2>Gallery</h2>

<img src="img-1.jpg" class="images">
<img src="img-2.jpg" class="images">
<img src="img-3.jpg" class="images">

Upvotes: 3

Views: 1749

Answers (1)

user12713785
user12713785

Reputation:

Hi JoeHat I solved it like this (see codepen), works with bootstrap 4 and Jquery 3.4.1. Couldn't get it to work until I used Jquery below. Also added a timer.

Here's [a link] https://codepen.io/pieperrr/pen/PowBjZO

$(window).bind("load", function() {      
  setTimeout(function() {
 $('.overlay-loader').fadeOut(function() {           
    });
    }, 5000);            
});

Upvotes: 2

Related Questions