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