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