How to Quickly Add a Loading Screen onto your website!
Tags: beginners, tutorial, javascript, webdev
Published: 2024-06-24 20:05:39

## 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](https://soundscape-lyart.vercel.app/) 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!**

<hr>

## 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.

```html
    <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. 


```CSS
.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._
<br>
You can also stylize your loading screen and add animations, in my loading screen the disc rotates. 

{% codepen https://codepen.io/lensco825/pen/pomKEbK %}

<hr>

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

```js
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](https://developer.mozilla.org/en-US/docs/Web/API/Window/window)). 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.

```js
window.addEventListener('load', function() {
  loadingScreen.style.display = 'none';
})
```
<br>
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.

<hr>

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