Introduction
Today, I will teach you how to create a loading screen animation using HTMLS, CSS, and JS. This tutorial will contain all the code required for you to create the loading screen. Let's go!
Process
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.
Conclusion
If you found this usful then please share this and follow me! Also check out my Buy Me a Coffee!
