How To Create a Loader | Add Preloader to your html page










Table of Contents

How To Create a Loader | Add Preloader to your 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 Server:-

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.

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

As we want to check our preloader is working fine or not. So I am attaching some photos which will show you How to check your preloader is working or not??🤔


firstly click the right key of your mouse then click to  >Inspect(note I am using Mozilla).

How To Create a Loader | Add Preloader to your html page
then click on the icon which has a mobile phone-shaped icon.
How To Create a Loader | Add Preloader to your html page
Now click on   No throttling then choose regular 2G.

How To Create a Loader | Add Preloader to your html page
Now your webpage starts loading as you are using 2G internet😁. Hey, Don’t be afraid this only be applied to this webpage.
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.
 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="loader"></div>
<div class="main">
<input type="text" placeholder="Search" class="input" >
<a href=""><ion-icon class="search" name="search" ></ion-icon></a>
</div>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>

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.
 loader=document.querySelector(".loader");  
window.addEventListener("load",()=>{
loader.style.display="none"
})

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.

Share on:

Leave a Comment