When I go to a lot of websites, I see that they don't have a loading screen. Why? Because a lot of web developers don't know the secret. They don't know the right time to put the loading screen in.

I want to share the secret with the DEV community. A loading screen makes users feel like they don't have to wait as long staring at a white or blank screen for a while.

All it takes is some DOM, CSS, and two event listeners.
Okay, so first, style your loading screen with CSS and make it visible. Try to animate it a bit. Store the loader in a single <div> tag. Make sure it is not transparent and that it covers the whole screen. You can add additional divs and elements inside.

Okay. Now add an event listener to document.documentElement so that when the document element loads, the loader is shown.

document.documentElement.onload = function(){
    document.getElementById("loader").style.display = "block";
};

//or

document.documentElement.addEventListener("load", function(){
    document.getElementById("loader").style.display = "block";
});

Your loader doesn't have to be hidden at default, just make sure it is shown once the document element is loaded.
Once the window (or all items in the document) are loaded, the window.onload() function will be invoked.

So when the window loads, hide the loader.

window.onload = function(){
    document.getElementById("loader").style.display = "none";
};

//or

window.addEventListener("load", function(){
    document.getElementById("loader").style.display = "none";
});

I don't know how to display the load progress yet, but this is a good starter.

Now, test it out. Your loader should be working.
You can check out a couple sites I made that have a loading screen:

Like this? You can subscribe to me at my website

Thanks for reading!
Happy Coding!

A little dev secret: How to make a loading screen