How to add a Pre-loader in your webpage

Loader/Throbber/Spinner

Essentially, pre-loaders (also known as loaders) are what you see on the screen while the rest of the page's content is still loading. Pre-loaders are often simple or complex animations that are used to keep visitors entertained while server operations finish processing.

In this tutorial, I have used SVG (Scalable Vector Graphics) for pre-loading animation. It's resolution independent and responsive. Images can be scaled the same way we scale all other elements in responsive web design.

So, to design the SVG, I have used Figma which is used for web-based graphics editing and user interface design app.

After editing and importing your frame as SVG, you now need to animate it. For basic animations, you can either use svgartista or svgator. If you want your own custom animations you can do it by using @keyframes in CSS.

This is a Pre-loader Pen, which I created using above methods and used it in my own portfolio website.

https://codepen.io/Malakannawar/pen/JjNZKvY

Now, how do we add this on our website?

Follow these steps to add a pre-loader

Create a loader.html and loader.css file and copy over the code for both HTML and CSS and then create a wrapper around it.

HTML


      <div class="loader-wrapper">
         <div class="loader"> <svg /*svg code*/></svg></div>
      </div>

CSS


     .loader-wrapper {
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: whitesmoke;
          display: block;
          justify-content: center;
          align-items: center;
          z-index: 999;
          overflow: hidden;
  }

If done correctly, this is what you should get.

output

Load Event

The loading Animation is ready. Next we’ll need hide it when the loading is complete. We can do that by listening to window load event which will trigger when all the elements have been completely loaded. Then use jQuery fadeOut method to hide the loader.

Make sure you have jQuery included in your project.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

Then to include loading animation page in your other HTML document use a div tag with id="loading".

<body>
<div id="loading"></div>  
</body>

In CSS file, import loader.css using

@import url(/assets/css/loader.css);

In JavaScript file, you have to call loader.html using

$.get("/assets/html/loader.html", function(data){
  $("#loading").replaceWith(data);
});

Then to trigger the loading animation everytime you load a page use this code:

$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( ".loader-wrapper" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( ".loader-wrapper" ).remove(); //makes page more lightweight 
  });

And that’s it! Very simple and straightforward😉✌

Asmit Malakannawar