DEV Community

loading...
Cover image for How to add a Pre-loader in your webpage

How to add a Pre-loader in your webpage

Asmit Malakannawar
I'm a B.Tech Computer Science and Business Systems student. I am a Cloud Enthusiast and a learner, and deeply passionate about Software Development & Innovations.
・2 min read

Loader/Throbber/Spinner

chrome-capture

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.

Now, how do we add this on our website?

Follow these steps to add a pre-loader

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

Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

If done correctly, this is what you should get.

Screenshot (74)

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>

Enter fullscreen mode Exit fullscreen mode

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

<body>
<div id="loading"></div>  
</body>
Enter fullscreen mode Exit fullscreen mode

In CSS file, import loader.css using

@import url(/assets/css/loader.css);
Enter fullscreen mode Exit fullscreen mode

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

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

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 
  });  
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
basduchambre profile image
Bastiaan van de Kamer • Edited

In your CSS, the wrapper should be display: flex; instead of block. Also, since a lot of websites don't want to use jQuery anymore, it would be nice to have a Vanilla JS explanation. Other than that, cool guide :)

Collapse
asmit2952 profile image
Asmit Malakannawar Author

Thank You!!

Yupp, will work on that 👍🏻

Collapse
jonrandy profile image
Jon Randy • Edited

Interesting. I've never heard them called 'pre-loaders' before (or 'loaders' for that matter). I've always known them as 'throbbers' or 'spinners'.

The word 'Loader' implies that they're loading something - which isn't necessarily the case (the running process may not even be contacting the server). Probably not the best name TBH

Collapse
asmit2952 profile image
Asmit Malakannawar Author

Well yaaa...it's just for a static web page..to add aesthetics. I was searching online for tutorials, didn't find any, so figured it out on my own.

And thank you for the suggestion :) 👍🏻