3

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">
user4157124
  • 2,809
  • 13
  • 27
  • 42
Joehat
  • 979
  • 1
  • 9
  • 36
  • 3
    There's an error in the console. This is because `load()` is used to make an AJAX request to *add content to the page*. To hook to the `load` event of the window use `$(window).on('load', function() {...` – Rory McCrossan Dec 02 '19 at 16:32

1 Answers1

2

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);            
});
B. Go
  • 1,436
  • 4
  • 15
  • 22
  • Use it when load/refresh Bootstrap table which takes some time depending on the data –  Jan 14 '20 at 22:17
  • Your code, here on Stack Overflow, produces an error: `Uncaught SyntaxError: Unexpected token '}'`. The Codepen looks fine. I would also recommend using Codepen's "Tidy JS" feature; it's under the dropdown. – Marc Barbeau Jan 14 '20 at 22:43