About
Loading screens are an effective way to hide unrendered/unloaded content while a page is loading. This creates a better-looking, more stable and polished user interface on your web page. Here, you can see the difference in these two images:
GUIDES
Making A Loading Screen For Web Pages
Click To Go Back To The Guides PageRefreshing repeatedly w/o Loading Screen
Refreshing repeatedly w/ Loading Screen
How to make it?
Step 1: Creating the HTML part
The HTML part is very simple. You can place this code block right after <body>. If you want a loading screen on all of your pages, you have to add this code to every page, right after the <body> tag.
<div id="loadingScreen">Loading</div>
<noscript>
<style>
#loadingScreen {display: none;}
body {overflow-y: auto;}
</style>
</noscript>
- You can change the "Loading" text with anything you want. For example, a spinning circle GIF. I'm going to use a simple text content in this tutorial.
- We added <noscript> tag to prevent the loading screen stuck in infinite loop if the user has JavaScript disabled. Because we're going to use JavaScript to hide the loading screen when the page is loaded.
Step 2: Styling it with CSS
Place this code into your CSS file.
body {overflow-y: hidden;} /*Hides the scrollbar while loading.*/
#loadingScreen {
position: fixed; /*Keeps the loading screen fixed on the screen */
inset: 0; /*Makes loading screen wrap full screen.*/
z-index: 999999; /*Makes loading screen stay on top.*/
user-select: none; /*Disables user interaction with loading screen.*/
transition: opacity 300ms; /*Adds a nice fading effect.*/
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 7rem;
}
Bonus, you can add a nice dot animation to it if you wanna make something like this => Loading
#loadingScreen::after {
content: '';
animation: loadingDots 1s linear infinite;
}
@keyframes loadingDots {
0%, 100% {content: '';}
25% {content: '.';}
50% {content: '..';}
75% {content: '...';}
}
Step 3: Hiding it with JavaScript
Now, we need a code that hides the loading screen when the page is loaded. Put this script code into your HTML file (inside <head> ... </head> or after </body> recommended.) or you can put the code itself into your main JS file.
<script defer>
window.onload = function(){
var loadScreen = document.getElementById("loadingScreen");
loadScreen.style.opacity = "0";
document.body.style.overflowY = "auto";
setTimeout(function(){loadScreen.style.display = "none"}, 300);
}
</script>
And the loading screen is complete. Hope it was an useful tutorial for you ;) If you have questions, feel free to contact!
Click To Go Back To The Guides Page