How To Add Preloader to In HTML Page

How To Add Preloader to In HTML Page

How To Add Preloader to In HTML Page
How To Add Preloader to In HTML Page

 

Hey…..Hope you are well!!

 
Are your website takes so much time to load and during the period your website loads it looks bad then there is a way to solve it that way is by using preloader.
 
Now, the question arises what is a preloader?
 
Preloader is basically the web layout/ context that you can see while your page is loading.
 

Live Preview Of Add Preloader to In HTML Page:-

Disclaimer:-Here you can’t see the preloader because
1. On this website there is not so much takes so much time to load.

2. Nowadays most of us have access to a good speed internet.

Now it’s time to code.

HTML  Code for Preloader:-

I have already a website that is so simple so I just added a preloader in it.
In the body section of the HTML, I defined a div class named loader.
<div class="loader">
  <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/b6e0b072897469.5bf6e79950d23.gif" alt="load"></img>
</div>

<div class="img">
  <img src='https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg' style="height:100%;width:100%;"></img>
</div>

 

CSS code:-

Styling the preloader for preloader we can use gifs or we can use SVG format images then animate it. To make it very simple I have used simply a gif.
*{
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
width:100%;
display:flex;
justify-content:center;
align-items:center;
background-color:royalblue;
position: relative;
}
.main{
min-height:fit-content;
width:fit-content;
display:flex;
justify-content:center;
align-items:center;
}
.search{
width:50px;
height:50px;
color:white;
}
.input{
width:0px;
height:0px;
border-radius: 15px;
border:0px;
padding:0px;
transition-duration: 0.7s;
}
a,a:hover{
background-color: blue;
width:50px;
height:50px;
border-radius:50%;
transition-duration:1s;
z-index:100;
}
.main:hover .input{
width:250px;
height:45px;
border-radius: 15px;
border:0px;
padding: 5px;
transition-duration: 0.7s;
}
.loader{
height: 100vh;
width:100vw;
position:absolute;
z-index: 999;
background-color:rgb(250, 249, 249);
background-image: url("Curve-Loading.gif");
background-position: center;
background-repeat: no-repeat;
}

I have applied some basic CSS properties.

Javascript code:-

So I have used load event which means when your page and all of its components loads perfectly then the function inside that block will start executing.
let loader=document.querySelector('.loader');

window.addEventListener("load",vanish);

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

I hope you have liked it. Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.

Leave a Reply