javascriptjqueryprogress-barloading

Display a loading bar before the entire page is loaded


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.


Solution

  • 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>