Add a loader to your website
Tags: webdev, html, css, javascript
Published: 2021-05-12 08:35:28

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



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

``` 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 :

{% codepen https://codepen.io/clement-gaudiniere/pen/jOBNVdw %}


### Third step
Now we will style our page :

``` css
@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. 

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

{% codepen https://codepen.io/clement-gaudiniere/pen/XWMbMWP %}

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