How to add a Pre-loader in your webpage
Tags: html, javascript, css, webdev
Published: 2021-08-02 09:10:47

## Loader/Throbber/Spinner

![chrome-capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8bllncfu4hhgn0hwnv6.gif)

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](https://www.figma.com/files/recent?fuid=999543812784962769) 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](https://svgartista.net/) or [svgator](https://www.svgator.com/). 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.

{% codepen https://codepen.io/Malakannawar/pen/JjNZKvY %}

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

```html

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

```

#### CSS

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

![Screenshot (74)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2546y414uj0ayobc4ho.png)

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

```javascript 

<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"`.

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

 In **CSS** file, import `loader.css` using 

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

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

```javascript
$.get("/assets/html/loader.html", function(data){
  $("#loading").replaceWith(data);
});
```
Then to trigger the loading animation everytime you load a page use this code: 

```javascript
$(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😉✌