Display a loading bar before the entire page is loaded

Question

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.

Answer 1

Use a div #overlay with your loading info / .gif that will cover all your page:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

jQuery:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

---

Here's an example with a Loading bar:

const el = (sel, par) => (par || document).querySelector(sel);

function loadbar() {
  const elOverlay = el("#overlay");
  const elProgress = el("#progress");
  const elProgstat = el("#progstat");
  const images = document.images;
  const tot = images.length;
  let c = 0;
    
  if (tot == 0) return doneLoading();

  function imgLoaded() {
    c += 1;
    const perc = Math.floor(100 / tot * c) + "%";
    elProgress.style.width = perc;
    elProgstat.textContent = `Loading ${perc}`;
    if (c === tot) return doneLoading();
  }

  function doneLoading() {
    elOverlay.style.opacity = 0;
    setTimeout(() => {
      elOverlay.style.display = "none";
    }, 1200);
  }
  
  [...images].forEach(img => {
    const tmpImg = new Image();
    tmpImg.onload = imgLoaded;
    tmpImg.onerror = imgLoaded;
    tmpImg.src = img.src;
  });
}

addEventListener('DOMContentLoaded', loadbar, false);

* {
  margin: 0;
}

body {
  font: 200 16px/1 sans-serif;
}

img {
  max-height: 10rem;
}

#overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 1s 0.4s;
}

#progress {
  height: 1px;
  background: #fff;
  position: absolute;
  width: 0; /* will be increased by JS */
  top: 50%;
}

#progstat {
  font-size: 0.7em;
  letter-spacing: 3px;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  width: 100%;
  text-align: center;
  color: #fff;
}

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

<div id="container">
  <img src="https://placehold.co/4000x4000/0bf/000/png" alt="Image 1 description">
  <img src="https://placehold.co/4000x4000/f0b/000/png" alt="Image 2 description">
  <img src="https://placehold.co/4000x4000/bf0/000/png" alt="Image 3 description">
</div>