DEV Community

loading...

Add a loader to your website

Clément Gaudinière
Développeur de sites Web Full Stack, maîtrise l'HTML, le CSS (et par continuité le SCSS), le PHP et le JS. Passionné d'aéronautique et d'aéromodélisme.
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
};
Enter fullscreen mode Exit fullscreen mode

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

Discussion (13)

Collapse
pavelloz profile image
Paweł Kowalski

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

Collapse
l4znet profile image
Charly Escalona

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.

Collapse
brandonwallace profile image
brandon_wallace

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.

Collapse
pavelloz profile image
Paweł Kowalski

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.

Collapse
ps173 profile image
Pratham Sharma

loading.io/css/

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

Collapse
clementgaudiniere profile image
Clément Gaudinière Author

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

Collapse
elijahe35939317 profile image
ElijahE

You could also implement that with gifs i hope?

Collapse
clementgaudiniere profile image
Clément Gaudinière Author

It is possible, you need to replace the

<div class="lds-ripple">
      <div></div>
      <div></div>
 </div>
Enter fullscreen mode Exit fullscreen mode

with an image :

<img src="yourImg.gif"  alt="Your Img">
Enter fullscreen mode Exit fullscreen mode

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

Collapse
youpiwaza profile image
max

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

Collapse
viracoding profile image
viracoding

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

Collapse
clementgaudiniere profile image
Clément Gaudinière Author

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.

Collapse
peprahk713 profile image
peprahk713

This has really made my day as a beginner......thank you very much

Collapse
clementgaudiniere profile image
Clément Gaudinière Author

But you're welcome 😀

Forem Open with the Forem app