A little dev secret: How to make a loading screen

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:

• https://leviathan-programming.cf
• https://agapechiro-tx.com
• https://grbc.leviathancoding.repl.co/

Like this? You can subscribe to me at my website

Thanks for reading!
Happy Coding!

Comments

[Muhammad Hasnain]

Look into "skeleton loading." You'll notice big companies use skeletons instead of loading screens, using skeletons can actually retain user as the skeleton let them know that whatever they need is being loaded.

The problem with full screen loader is that it covers everything up, you don't know what to expect and how long you have to wait. Skeletons don't have that problem. Also, mostly, people use skeletons in SPA type sites built with JavaScript frameworks.

You could also extract and put critical CSS in style tags at the top of your document. For instance, extract and put CSS for hero in the head tag so the document loads that small bit CSS before anything else.

This way you're site will load with users already looking at a beautiful hero instead of loading screens. You can use this technique in almost any type of site, especially static or server side rendered sites. This will also boost your lighthouse/performance score.

[Matvey Romanov]

Thanks

[Jonathan Apodaca]

That Ubuntu loading screen you have as the banner image gave me flashbacks!

[popadicbranislav]

I agree to @hasnaindev, in the other comment, however I believe even this can be helpful in some cases.

You can add some nice animations loading.io/css/ (I am not an author)

[Muhammad Hasnain]

Ooh yes, I agree. I've personally implemented both of these together where there was a full screen loader when user was being authenticated and suddenly after that were the layout skeletons. You're right about it being helpful in certain situations. Thank you.