JavaScript original Loader (from Medium post) || #JS #AnimeJS #Pre-loader #Loader

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:

Create a full-screen website pre-loader in a jiffy - codeburst

Vaibhav Khulbe ・ Sep 11, 2018 ・ 5 min read

codeburst.io

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 in your project:

• CDN:

  https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js

• Import:

  import anime from 'anime';

Coding

This is the pre-loader which i did from the article listed above:

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 position: fixed; top: 0; left: 0; width: 100%; height: 100%;. To place him above all elements, we'll need z-index: 99;

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002155;
  z-index: 99;
}

div.loader__container as i said above necessary for centering elements with help of properties display: flex; position: fixed; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; and z-index:100 to place the text above the loader again, so that we can see it.

.loader__container {
 display: flex
 position: fixed
 flex-direction: column
 justify-content: center
 align-items: center
 width: 100%
 height: 100%
 color: #fff
 z-index: 101
}

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:

const loader = ".loader", 
      loaderCounter = $(".loader__container__counter"),
      loaderContainer = $(".loader__container"),
      loaderLayer = $(".loader__layer");

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:

 let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  console.log(counter);
  if(counter == 100){
   clearInterval(loaderTimer);
  }
}, 35);

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:

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);

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:

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);

Well at the end I would remind you again about that i took the idea from this medium post:

Create a full-screen website pre-loader in a jiffy - codeburst

Vaibhav Khulbe ・ Sep 11, 2018 ・ 5 min read

codeburst.io

and improved it with animejs.
Here is my final example in Codepen:

Bye