Simple Preloader of Website in HTML, CSS & Angular JS Frontend Everything
Hello Everyone 👋Welcome to My New Blog. Today I have made A simple Preloader for a website with the help of HTML, CSS, and Angular JS
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
What is a preloader?
Preloader is a loader that comes before the page content loads. When a page takes time to load, you probably see a loader on the page. So that is nothing but a preloader. Now we are going to make that by using little Angular JS. First, let us see the preview of the project.
Video Preview of the project,
So that was the preview now let us start making the project 😄
First, we will code HTML
HTML 🎈( step - 1)
<!DOCTYPE html>
<html>
<head>
<title>Display Loading Div</title>
<link rel= "stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="loader">
<div></div>
</div>
<div class="content">
Hello! Do Like the post and share it with your freinds. Also the source code is available on my telegram channel : frontend everything
</div>
</body>
</html>
So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #16191E;
}
.content{
font-size: 1.2rem;
padding: 20px;
color: white;
font-family: arial;
}
.loader{
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16191e;
position: absolute;
}
.loader>div{
height: 100px;
width: 100px;
border: 10px solid #45474b;
border-top-color: #2a88e6;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
animation: spin .8s infinite linear;
}
@keyframes spin{
100%{
transform: rotate(360deg);
}
}
CSS coding is also done. Now let us move to JAVASCRIPT 😎
Angular Javascript 🎈( step - 3)
<script>
$(window).on('load',function(){
$(".loader").fadeOut(1000);
$(".content").fadeIn(1000);
});
</script>
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.