Website Preloader

Website Preloader are a loading screen which comes before all the website loads.  There are lots of fancy websites which implements this cool features. The preloader makes the user refreshed to wait before the site loads. Lots of eye catching animations are being used in these preloaders. In this blog I will be teaching to make these preloaders. We will use HTML, CSS and jQuery for giving life in the loader.

Step:1 HTML

<div class="loader">
      <span>Loading</span>
    </div>
    <div class="container">
      <h1>HELLO DESIGNERS</h1>
      <h2>SUBSCRIBE, LIKE and COMMENT</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Tempor commodo ullamcorper a lacus vestibulum sed. Cras sed felis eget velit. Risus commodo viverra maecenas accumsan lacus. Quis commodo odio aenean sed adipiscing diam donec. Sit amet aliquam id diam maecenas ultricies. Auctor augue mauris augue neque gravida in fermentum et sollicitudin. Quisque sagittis purus sit amet volutpat consequat mauris. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Odio facilisis mauris sit amet massa vitae. Tempor orci dapibus ultrices in iaculis. Mauris ultrices eros in cursus turpis massa tincidunt. Purus viverra accumsan in nisl nisi scelerisque eu ultrices vitae.
      </p>
    </div>

I have created a loader div where the loading component will be kept. And the next div will consist of the main website part. For now I will use simple website design.

Step:2 Lets style our HTML

.loader, body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  overflow: hidden;
}
body{
  background: #000;
  color: #fff;
}
.loader {
    background: #4a2fb7;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    color: #fff;
    transition: 0.5s;
}
.loader span{
  font-size: 3rem;
  position: relative;
  display: block;
  letter-spacing: 10px;
}
.container{
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.loader span:after {
    position: absolute;
    content: "Loading";
    top: 0;
    width: 100%;
    height: 4px;
    left: 0;
    animation: nexts 2s infinite;
}
.loader span:before {
    position: absolute;
    content: "Loading";
    top: 0;
    width: 100%;
    height: 4px;
    left: 0;
    animation: next 2s infinite;
}

I have used the above styling for my HTML. Let me explain them. I have made both the loader and main container div of full screen by 100vh property. The loader div position fixed and full height width so that the loader will cover entire screen in browser. Later we will remove this loader with help of jQuery. I have used the pseudo elements inside the loader span to use animation in it.

@keyframes next{
  from{
    top: 115px;
    transform: scale(0);
  }
  to{
    top: 0;
    transform: scale(1);
  }
}

@keyframes nexts{
  from{
    top: -115px;
    transform: scale(0);
  }
  to{
    top: 0;
    transform: scale(1);
  }
}

My animation is like this. I have defined two keyframes fo animation. One for before and another for after of the pseudo elements that I defined in the css.  One keyframe will transform the before elemt from top to bottom with scaling and another from bottom to top.

Step 3: jQuery part

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script type="text/javascript">    
  setTimeout(function(){
    $(".loader").css("height","0");
  }, 4000);
</script>

The important part where we will make the loader load just for sometime is with the help of jQuery. In the above code you can see I have used jQuery cdn for jQuery support. After that I have used the setTimeout function. This function will execute its inner function after 4 seconds. You can see that I have given css inside the setTimeout function. Also 4000 at last refers to 4 seconds.

So in this way the at the begining the loader will be visible with animated screen and after 4 seconds it will disapper. In this way we created a website preloader. You can get my full code from githud here. Also you can watch my video tutorial.