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.
Code by | Hicham |
Project Download | Link Available Below |
Language used | HTML, CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
Live Preview Of Add Preloader to In HTML Page:-
2. Nowadays most of us have access to a good speed internet.
HTML Code For To Add Preloader
<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:
CSS Code For To Add Preloader
*{ 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; }
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.
Javascript code:-
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 😎.
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!