JavaScript original Loader (from Medium post) || #JS #AnimeJS #Pre-loader #Loader
Tags: codepen, javascript, tutorial, frontend
Published: 2020-04-20 18:55:12

# **How to make pre-loader?**
*Today i show you how make this pre-loader:
https://miro.medium.com/max/2712/1*vgP6AbEvZYhdQCfBBLgikg.gif*
### **BUT before I start, I'll tell you that I took the idea from this medium post: {% medium https://codeburst.io/create-a-full-screen-website-pre-loader-in-a-jiffy-74e7aa99ac1b %} and improved it with animejs.**
Now, let's go!

# **Preparation**

### What do you need to know to make this?
You need HTML, CSS, JS (jQuery) skills.
### Libraries
To anime this pre-loader, you need to connect [Anime.js](https://animejs.com/) in your project:
 * CDN:
<pre>https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js</pre>
 * Import:
<pre>import anime from 'anime';</pre>

# **Coding**
This is the pre-loader which i did from the article listed above:
{% codepen https://codepen.io/duboloms/pen/oNjxgaY %}
### Logic of pre-loader
Now let's parse the code
#### **HTML**
In HTML all very very simple. I created primary block **div.loader** inside which the block is located **div.loader__container** which i maked for place text in center of loader (with help of css). In **div.loader__container** located **h1.loader__container__counter**, he is empty, because here will be placed percent of page load with the help of JavaScript.

#### **CSS (Sass which i processed in css for beginners)**
To stretch pre-loader to the full screen, we will need property <code>position: fixed; top: 0; left: 0; width: 100%; height: 100%;</code>. To place him above all elements, we'll need <code>z-index: 99;</code>
<pre class="css">
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002155;
  z-index: 99;
}
</pre>
**div.loader__container** as i said above necessary for centering elements with help of properties <code>display: flex; position: fixed; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;</code> and <code>z-index:100</code> to place the text above the loader again, so that we can see it.
<pre class="css">
.loader__container {
 display: flex
 position: fixed
 flex-direction: column
 justify-content: center
 align-items: center
 width: 100%
 height: 100%
 color: #fff
 z-index: 101
}
</pre>
**div.loader__layer** is necessary for us to see as if the loader is filled (depending on the percentage of loading) with water or something else... generally just a cool effect! :) .
I decided not to tell you about the text styles, because they are very simple. If anything, you can view the text styles in the example above (codepen pen).

#### **JavaScript**
Let's start by creating variables with elements which we'll need:
<pre class="javascript">
const loader = ".loader", 
      loaderCounter = $(".loader__container__counter"),
      loaderContainer = $(".loader__container"),
      loaderLayer = $(".loader__layer");
</pre>
const loader without jquery symbols $() because animejs not work with jquery and js (querySelector and getElementById...) selectors :(

To make counter of pre-loader, need to create setInterval() function:
<pre class="javascript">
 let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  console.log(counter);
  if(counter == 100){
   clearInterval(loaderTimer);
  }
}, 35);
</pre>
This function return from 0 to 100 in browser console.
If in your console the same, all good and you can move on.
Now record counter const in **h1.loader__container__counter**. Therefore in HTML this tag is empty.
Here is the code that does this:
<pre class="javascript">
let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  if(counter == 100){
   clearInterval(loaderTimer);
   loader.css({transform: "-100%"});
   loaderLayer.css({transform: "-100%"});
   loaderContainer.css({transform: "-100%"});
  }
  loaderCounter.html(counter + '%');
  loaderLayer.css({width: counter + "%"});
}, 35);
</pre>
Here I made an animation using the jQuery css() method.
But i want to make more cool animation, therefore i used AnimeJS animation library.
**Here is the final JS code:**
<pre class="highlight javascript">
const loader = ".loader",
      loaderCounter = $(".loader__container__counter"),
      loaderLayer = $(".loader__layer");

// Timer
let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  const tl = anime.timeline();
  tl.add({
    targets: ".loader__layer",
    duration: 0,
    width: counter + "%"
  });
  if(counter == 100){
  clearInterval(loaderTimer);
    tl.add({
      targets: [".loader", ".loader__layer", ".loader__container"],
      duration: 700,
      visibility: "hidden",
      translateY: "-100%",
      easing: 'easeInExpo',
      delay: 300
    });
  }
  loaderCounter.html(counter + '%');
  // loaderLayer.css({width: counter + "%"});
}, 35);
</pre>
**Well at the end I would remind you again about that i took the idea from this medium post: {% medium https://codeburst.io/create-a-full-screen-website-pre-loader-in-a-jiffy-74e7aa99ac1b %} and improved it with animejs.**
Here is my final example in Codepen:
{% codepen https://codepen.io/duboloms/pen/oNjxgaY %}
Bye