Hello readers, Today in this blog you’ll learn how to set Preloader or Loader in Website or create Loading Screen Animation using HTML CSS & JavaScript. Earlier I have shared many blogs on how to create Preloader or Loader using HTML CSS but today, I’ll teach you how to set that Loader in your website or your HTML Page.
The Preloader or Loader indicates the webpage is in the loading process. It helps to entertain your visitors or content viewers while the rest of the page’s content is still loading. Loaders may simple or complex animation that is used on websites.
Today in this blog, I’ll share with you this program (Loading Screen Animation). In the program, on the webpage, when you refresh your web page and the page’s content is starts loading, at that time, there is shown a small preloader, and after loading content the loader will be hidden automatically.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Loading Screen Animation).
Video Tutorial of Preloader or Loader in Website
As you have seen the actual output of our codes in the video, You can use this loader in your websites, projects, and HTML Page. If you know HTML & CSS then you can also create this type of Loader and use it on your projects. A loader helps to maintain the bounce rate of the website.
If you like this program (Loading Screen Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
Screen Loading Animation in HTML CSS [Source Codes]
To create this program (Preloader or Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Screen Loader | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<div class="ring"></div>
</div>
<div class="content">
<div class="image"></div>
<div class="text">
<div class="title">
Screen Loader in HTML CSS & JavaScript
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora dicta corporis animi maxime provident quisquam soluta ducimus optio suscipit in aperiam a dolores vitae adipisci numquam, maiores quos. Nisi ducimus culpa, atque obcaecati quos, voluptatibus, in hic nobis omnis doloremque amet optio! Amet cumque temporibus error quia unde. Vero laborum suscipit ad fuga veniam, id, quo dolores officia, deserunt rerum eveniet perferendis reiciendis. Itaque nostrum incidunt quo! Aperiam sint quod inventore vitae, sapiente ducimus voluptas doloremque. Ducimus temporibus laboriosam illo quidem, laborum officiis esse maiores doloribus aperiam accusantium sed, ullam ad fugit quam at saepe animi optio repudiandae quaerat ipsam officia est corrupti magnam veniam. Enim voluptatum totam hic dignissimos nostrum magni at nobis quos dolorem, nihil? Ipsum sapiente tempora exercitationem obcaecati, odio ratione optio, voluptatem delectus accusamus dignissimos sunt minima beatae, eveniet. Sint, explicabo, quisquam! Est aspernatur officiis omnis laboriosam, at id aliquam ea quidem quae, architecto et nisi!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id itaque excepturi officiis obcaecati accusamus alias, vero molestiae distinctio dolores quasi voluptatibus doloribus eum illo est qui, cum, deserunt eligendi at impedit quibusdam culpa suscipit. Ipsum officiis beatae quasi voluptatem magnam ut itaque consequatur quos maiores. Unde nihil aliquid, modi sapiente illo, quasi aspernatur, a cum error aut sint, placeat alias! Maxime voluptatum id tempora sed quia cupiditate laudantium veritatis minima! Impedit perspiciatis adipisci nesciunt est quod molestiae, eum minima animi, facilis fugiat ea ipsum a fuga distinctio labore aperiam officiis maxime voluptates! Ea assumenda quaerat ipsum fuga molestias illo, similique.
</p>
</div>
</div>
<script>
const loader = document.querySelector(".loader");
window.onload = function(){
setTimeout(function(){
loader.style.opacity = "0";
setTimeout(function(){
loader.style.display = "none";
}, 500);
},1500);
}
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.loader{
position: fixed;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
transition: all 0.5s;
}
.loader .ring{
height: 45px;
width: 45px;
border: 5px solid #ddd;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.loader .ring:after{
position: absolute;
content: "";
height: 100%;
width: 100%;
border-radius: 50%;
border: 5px solid #ff3d00;
border-top-color: transparent;
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
100%{
transform: rotate(360deg);
}
}
.content .image{
background: url("bg.png") no-repeat;
height: 100vh;
background-size: cover;
background-position: center;
}
.content .text{
padding: 20px 50px;
}
.content .text .title{
padding: 10px 0 0 0;
font-size: 35px;
font-weight: 700;
}
.content .text p{
padding: 10px 0;
text-align: justify;
}
That’s all, now you’ve successfully created a Loading Screen Animation using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Just amazing. I’m still a middle schooler, and I have learned a LOT from you. I already know more HTML and CSS than my father ! The only regret I have every time I watch your videos is that I can’t subscribe to you 10K times.
Thank you…Keep visiting!
You are the besty
Thank you…Keep visiting!
amazing!