Clément Gaudinière

Posted on May 12, 2021

Add a loader to your website

#webdev #html #css #javascript

Hello, today we will learn how to add a loader to our website ! Loaders have been used for a long time, it has been proven that users are more patient when a loader is present on a website. That's why I propose to set up a loader that will disappear when the whole page is loaded.

First step

First we will set up our HTML :

The <div> tag with the id containerLoader will hold the loader (as the name suggests 😉).
While the <div> tag having the class containerText, will allow to contain all the content of the page, both text and images

<body>
  <div id="containerLoader" class="containerLoader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="containerText">
    <h1>I'm the title</h1>
    <p>Your text here</p>
  </div>
</body>

Second step

Now we set up our loader, with some CSS.

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

You can see the result of the loader animation below :

Third step

Now we will style our page :

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  background: #252525;
  color: white;
  font-family: "Roboto", sans-serif;
  margin: 0 5% 0 5%;
}

.containerText {
  display: block;
  margin: 0 auto;
  width: 900px;
  max-width: 90%;
}
.containerText p {
  text-align: justify;
}
.containerText h1 {
  text-align: center;
}

/* The disappearing animation of the loader */
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}
.hide {
  animation: hide 1s;
  animation-iteration-count: 1;
}

/* The loader container */
#containerLoader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  background: black;
}

/* This last piece of code is purely aesthetic and optional.  */
::-moz-selection {
  background: rgba(255, 255, 255, 0.22);
}

::selection {
  background: rgba(255, 255, 255, 0.22);
}

Last step

Finally, we set up our javascript so that the loader disappears once the page is ready to be displayed. Good point for some: we won't use jQuery.

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    document.getElementById("containerLoader").classList.add('hide'); 

    setTimeout(function(){ 
      document.getElementById("containerLoader").style.display = 'none';
    }, 1000);
  }
};

The result

You can see below the final result of our loader. If the animation is too fast, you can click on the "Rerun" button to restart the animation.

I hope this tutorial will be useful to you, don't hesitate to use it on your website if you wish and to give me your opinion in comments. 👍

Top comments (13)

Paweł Kowalski • May 12 '21

I have other idea; make your website so fast it doesnt need loader.

Charly Escalona • May 13 '21

But sometimes the user's internet speed are not enough powerful to load quickly your website, so I think a loader are useful in this case.

brandon_wallace • May 15 '21

Yes Pawel, it is a great idea to make the website load fast. Loaders are good for processes that could take a long time such as querying an API or a database for data. I put a loader on one of my websites during the query to two APIs but it only shows for split a second.

Paweł Kowalski • May 16 '21

Ive read somewhere that if spinner is shown for less than 2 seconds, its better to not show it, because it confuses users. Some applications even show spinners as long as its needed but not less than 2 seconds, to avoid it.

Pratham Sharma • May 12 '21

loading.io/css/

Check this site they provide some neat loaders and their code snippets for free

Clément Gaudinière • May 12 '21

Yes my loader comes from this site, you can also use this site which allows to customize them : wifeo.com/generateur-loader-css-gr...

ElijahE • May 12 '21

You could also implement that with gifs i hope?

Clément Gaudinière • May 12 '21

It is possible, you need to replace the

<div class="lds-ripple">
      <div></div>
      <div></div>
 </div>

with an image :

<img src="yourImg.gif"  alt="Your Img">

This method is less recommended since gifs take longer to load. 😉

max • May 18 '21

You also need to specify the loading of the gif outside of the loader, else the loader won't display from the beginning :/

viracoding • May 12 '21

Do u find it okay to use setTimeout on your page? I try every time to avoid it.

Clément Gaudinière • May 13 '21

The setimeout is not there to define the duration of the loader but to coordinate the keyframe animation and the display : none animation in javascript.