How to Quickly Add a Loading Screen onto your website!

#beginners #tutorial #javascript #webdev

Brief talk about loading screens

When you're making a website, the more data and lines of code you have the longer it takes for a computer to load a website fully. While it's loading, it can be confusing to a user as to why things are blank or unorganized. This is why loading screens are used, to not only give time for the website to load but to also let the user know the website is loading. Even if you have a fast computer, it's important to sympathize with users who have slower devices or network speeds. Which is why in this tutorial, I'll show how to make a loading screen with HTML, CSS, and JS. I'll be using a loading screen from my audio player web project as an example.

Note: This blog focuses more on implementing a loading screen than stylizing it to look good, you can put whatever you want in your loading screen!

Creating a Loading screen

First, we have to make a loading screen with HTML. Use a div element and add whatever content you want to have in your loading screen inside it. It could be text that says "loading" or a loading icon.

    <div class="loadingScreen">
<!--My content is the word "soundscape" but the o is replaced with a disc-->
      <h1>S<img src="compact-disc-with-glare.png" alt="disc" />undscape</h1>
    </div>

Now we have to make sure the loading screen covers the entire page using CSS. Set its position to absolute so it isn't affected by anything in the HTML file, then set its z-index to any high number as long as it's above all other elements on the page. Finally, set its width and height to 100% of 100vh if that doesn't work.

.loadingScreen {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Note: If the width and height are unable to fill up the webpage make sure the width and height of the html and body are set to 100% as well.

You can also stylize your loading screen and add animations, in my loading screen the disc rotates.

Making the loading screen disappear

This only needs 3 lines of JavaScript. First, you have to store you're loading screen in a variable.

var loadingScreen = document.querySelector(".loadingScreen");

After that give the window property an event listener. The window property refers to the full website and everything in it (To learn more about it click here). Make sure the event listener uses the load event which makes it so the event happens when everything has loaded. Finally, inside the event listener set the CSS display property of the loading screen to none.

window.addEventListener('load', function() {
  loadingScreen.style.display = 'none';
})

If you have a fast computer your loading screen will only show in a second or less, and that's fine! That means your phone or PC is incredibly fast and can quickly load your website in no time, however, now that you have a loading screen slower computers can be able to see it and understand that your website is loading.

Thank you for reading my tutorial blog, have a good day/night👋.