Sometimes pages on websites can load a bit slowly. They can be full of information and images which might cause an otherwise fast website to come to a complete halt. This tutorial will focus on how to make a pre-loading screen with basic HTML, CSS, and just a single line of JavaScript!
Why do you Need a Loading Screen?
Most users click off a site if nothing happens after three seconds. This is why it’s super important to make sure that the visitor at least sees something in these crucial few seconds. A simple loading bar can at least ensure the visitor that the website is indeed loading.
Plus, loading screens can also hide cumulative layout shifts, which is when elements on a website shift around as new elements get loaded in. This can especially be caused by large images, advertisements, or iframes. Often, it leads to accidental clicks and results in a poor user experience.
We applied these tactics on our gaming website, and below you can see the immediate improvement. (Left is with the pre-loader and right is without the pre-loader.) Best of all, this is incredibly easy to do!
Before getting started, if you don’t have a website yet or want to practice this with a code editor, you can register for completely free web hosting at Gilect.com. No credit cards are required.
HTML
The first step is to make the HTML element for the loading screen. Here, we have one line of code which is an image inside a div. We gave the div the “loadingbg” class so we could style it later on with CSS. We also gave it an ID of “loadingbg”, so we can easily refer to this specific element with JavaScript.
The image can be a picture or GIF of anything you want. For loading spinners and GIFs, Loading.io is a free website with an interface that lets anyone make and customize a loading animation.
We gave the image the class of “loadingicon”, but keep in mind you can change these to suit your needs. Here is the HTML code, it should be placed first thing in the <body> tag:
<div class="loadingbg" id="loadingbg"><img class="loadingicon" src="loading.gif"></div>CSS
So far, we have a loading image that sits at the top of the webpage. With a bit of styling, we are going to make it fill up the screen. Below is the CSS code needed to make this happen:
.loadingbg {
position: fixed;
background-color: #ffffff;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
.loadingicon {
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
}This makes the <div> element fill the screen, as well as center the loading icon. The <div> is given a white background color, and the loading icon is 100px by 100px. You can customize this code to your liking if you want a different-looking loading screen. However, make sure that your Z-Index is higher than all the other elements, or else the loading screen will display below everything!
The stylesheet should be linked in between the <head> tags of the HTML code, in between a <style> and </style> tag.
JavaScript
Now, we have a working loading screen! The only problem is that it loads forever and ever and never stops… this can be fixed with just a single line of JavaScript.
document.getElementById("loadingbg").remove();This code simply finds the element with the ID “loadingbg” and then removes it. Any scripts should be the last things in the <body> tags. A script should be placed between two <script> tags to work.
And that’s it, the pre-loading screen is finished! Now, your website will show a loading screen while the content loads in the background. See how easy that was?
How it Works
This code works by using HTML to make a <div> tag and an image, and then uses CSS to style it and make it fill up the screen. As long as this <div> is the first thing between the body tags, the loading screen will immediately show up before anything else.
There is no need to have code that detects when the webpage is finished loading. JavaScript is the last thing to run when loading up a webpage, meaning as soon as the JavaScript executes, the webpage will already have been fully loaded. Thus, all we need to do it just hide the loading screen.
Do note that the loading screen only shows up if the website is loading slowly. If your website is relatively light, then the JavaScript will almost immediately execute and the pre-loader will only show up for a split second if at all. All this means is your website loads quick and doesn’t need a pre-loader in the first place!
You can see an example of this on our gaming website. On pages with heavy content such as games, the pre-loader shows up. On other pages with minimal information, the pre-loader only comes up for a fraction of a second (or it just doesn’t show at all.)
Complete Code
Below is an example of all of the code being applied on a webpage. You can feel free to copy it and customize it to your needs.
<!DOCTYPE html>
<html>
<head>
<style>
.loadingbg {
position: fixed;
background-color: #ffffff;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
.loadingicon {
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class="loadingbg" id="loadingbg">
<img class="loadingicon" src="loading.gif"> <!--replace loading.gif with your loading image url-->
</div>
<!--content of your webpage goes here-->
<script>
document.getElementById("loadingbg").remove();
</script>
</body>
</html>
Congratulations! You just set up a simple pre-loader for your website! Pre-loaders can help make your website appear faster to visitors and hide cumulative layout shifts, which is why it’s important to have one.