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. 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 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]

As always, before sharing the codes of this program (Simple Loading Animation on Website). Let's a few talks about the main tags and codes of this program. Af first, in the HTML File, I created a <div> with the class "loader" then inside this tag, I created another <div> with the class name "outer". Then I created <div> and <p> tags and insert a title and dummy description.

In the CSS File, I placed a loader at the center. Then I created a round shape loader and filled with dark orange color. And using @keyframes property, I rotate this 360deg infinitely. After created a loader, I've hidden this loader and add an image on the background and styling to texts, title, description.

In the JavaScipt, first I called the loader using their class name and created a window onload function. Inside this function, I created a setTimeout function, and inside this function, I change the style of a loader to opacity:0. There in setTimeout function, I've written 1500 it means after 1500ms the setTimeout function will be run. Note: 1second = 1000ms.

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 these following codes in your file.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <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>

CSS FILE:

@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;
}

Video Tutorial of Preloader or Loader in Website

Screen Loading Animation in HTML CSS [Source Codes]

Thanks for visiting, Keep visiting.

4 Comments

Post a Comment

About Us

Contact Form

Loading Screen Animation using HTML CSS & JavaScript

Video Tutorial of Preloader or Loader in Website

Screen Loading Animation in HTML CSS [Source Codes]

Thanks for visiting, Keep visiting.

You might like

4 Comments

Post a Comment

Contact Form