Add Pre-loader to website within 5 minutes

Hello my all readers, greetings of the day. Today, we are going to add beautiful pre-loader on our website within 5 minutes. But before, let's understand what it is and why it is useful for our website ? Also do you know using pre-loader can cause increase in website traffic ?

What is Pre-loader ?

While surfing a website that contains too many images, videos, or long content, you must have noticed a Pre-loader runs before the actual content of website loads. This is like a trick to keep visitors stay on their website if the website takes too much time. Pre-loader is like a animated screen.This is first part of UI when website visitors interact with it. It could be anything like image,gif,text etc. Here is the sample for it :

Now a question might pop in your mind that how pre-loader can increase website traffic ? Let's see :

How pre-loader can increase website traffic ?

Actually the term "Bounce Rate" is introduced by Google.In a nutshell, it means the percentage of people who leaves your website before the content loads . The more bounce rate percentage your website have, the lesser traffic you'll get. Means it must be low for website.

• If your website bounce rate is higher, it means your website taking too much time to load the content.

• If your website bounce rate is lower, it means your website is taking less time to load the content.

How to add Pre-loader in our website ?

We have talked a lot, let's start the coding :

This is the live link for our website that what we are going to build :

Live Website Link

If you open a link. you'll notice a simple pre-loader on our website. We are fetching a random image from Server so its taking few seconds.

Let's see our html file :

<div class="loader">

        <img src="1.gif" alt="pre_loader">

</div>





<div class="content_img">

        <img src="https://source.unsplash.com/random">

</div>

And our CSS file :

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.loader
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #F1F2F3;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.loader img
{
    width: 100px;
    height: 100px;
}

.disappear
{
    animation:  vanish 1s forwards;
}

.content_img
{
    width: 100%;
    height: 100vh;

}

.content_img img
{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

@keyframes vanish
{

100%
{
    opacity: 0;
    visibility: hidden;
}

}

Keep in mind that the .loader class must be after body tag starts.

In .loader class, we have added a img which is 1.gif (Our website pre-loader gif). You can download any gif from google.

Using CSS, we just center our gif and set a position:fixed so that it overlap the entire section.

We just want a functionality that keep showing our gif until our website content loads.

To do this let's see our JS file :

var loader = document.querySelector('.loader')

window.addEventListener("load", vanish);

function vanish()
{
    loader.classList.add("disappear")
}

In JS, we are using a function load. On window load, please run function vanish.

The vanish. function just adding a class disappear on our loader class.

It is just a simple animation of fade effect when our website loads completely.

Free Pre-Loader sites :

• https://loading.io/

• https://icons8.com/preloaders/

• https://gifer.com/en/gifs/loader

• https://giphy.com/explore/loading

Complete Source Code :

https://github.com/Imravirathore/preloader_website