Loading Screen Animation using HTML CSS & JavaScript
Hello readers, Today in this blog you’ll learn how to set Preloader or Loader in Website using HTML CSS & JavaScript.
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 difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com
HTML
<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Screen Loader | VikashTech</title>
<link rel="stylesheet" href="blog.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>
CSS
@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("gallery.jpg") 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;
}
- By Praveen Kumar
- February 7, 2021 10:00 am
- 0
- Tags: loader code in html, Loading Screen Animation using HTML CSS & JavaScript, loading screen code in html
Comments
Leave a Reply
Latest Posts
How to send message via Telegram Bot using PHP - Telegram API
Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…
SuiteCRM, an open source tool for startups to use from an early stage.
When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…
How to Implement Google QAuth Authentication | Google Login - PHP MySQL
PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…
How to use Google Two Factor Authentication in your project?
At our end we take security at a priority, implementation of different ways to secure website should be the priority…
