Add Preloader in a Website Using HTML & Javascript

How To Add Preloader in a Website Using HTML & Javascript?

How To Add Preloader in a Website Using HTML, CSS, and Javascript?

Hello, Coders! Welcome to the site for codewithrandom. We’ll build a website with a preloader animation in this post. This kind of mini endeavour is essential to enhancing the website’s functionality. In order to add interactive components inside the website, we will add the loading animation with the aid of HTML and CSS. Preloader animation is used when a website takes a long time to load.

 
How To Add Preloader to In HTML Page
How To Add Preloader to In HTML Page
The benefit of using preloaders on website pages is, in my opinion, very good because it prevents us from immediately searching when we notice that our website appears random because not all the code has been loaded fully. The preloader will fully close the website page and will automatically vanish from view once the browser has loaded all the necessary code. 
 
Code byHicham
Project DownloadLink Available Below
Language usedHTML, CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Add Preloader to In HTML Page Table
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.

HTML Code For To Add Preloader

I simply added a preloader to my already very straightforward website. I created a div class called loader and specified it in the HTML body section.
<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>

In order to add structure to our loader, we will first create the container for our loading animation using the div element with class “loader,” and then we will insert a gif image inside of that container using the img> tag. In a similar manner, we’ll make another div element with the class “img” and add a background picture to our website that preloads.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

HTML Output:

How To Add Preloader in a Website Using HTML & Javascript?

CSS Code For To Add Preloader

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;
}

Step1:Using the universal selector, we will change the padding and margin’s default values to “zero”. Right now, we’ll set the position to “fixed” using the class selector (.load), the top and left properties to “zero,” the space to “light grey,” and the backdrop property.

Restaurant Website Using HTML and CSS

We’ll use the width and height properties to set the breadth and height to “100%,” the display property to set the display to “flex,” and the align item property to centre the items.

* {
    margin: 0;
    padding: 0;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    background: lightgray;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

How To Add Preloader in a Website Using HTML & Javascript?

Step2:We will assign the width and height to “100%” using the parent child selector (.loader img). We’ll also set the animation property using the selector (.disappear) and add a disappearance property with a 5 millisecond interval.

Now, we’ll set the opacity of the picture to “100%” using the visibility property, and the keyframes property at 100%, respectively.

I have applied some basic CSS properties.

How To Add Preloader in a Website Using HTML & Javascript?

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")
}

The let keyword in javascript, will be used to make a variable, and the window will be used to store the value of the HTML elements. Add an event monitor using the addEventListener command. In order to add the CSS class to our Java script, we will now construct a function called “vanish ()” using the loader.classList.add method.

Video Output Of How To Add Preloader:

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.

Which code editor do you use for Add Preloader Project coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!



Leave a Reply