How to Add Preloader in HTML Page?

A preloader is one of the important elements of the user-friendly interface. It indicates that contents are still loading with an animated icon or text. In this tutorial, you will come to know how to create a preloader on the HTML page.

Basically, it is a full-screen loading animation that covers the whole page until the page fully loaded. The overlay and loader icon build with CSS (no image) and jQuery used for preloader function.

Well! Let’s get started with HTML structure to build a loading screen.

How to Add Preloader in HTML Page?

In order to display a loading screen animation before completely load the page, you need to create two main HTML elements. The first div element is the preloader that covers the whole page (to hide the main content of the page). Similarly, the second div element is the preloader that contains the loader’s related content.

So, create a div element with an id name “preloader”. Likewise, create a div element with a class name “container-preloader”, id name “container” and place a child div inside it, and define its class name “animation-preloader”. Inside the animation loader, create a div element with the class name “spinner”. In the end, create a span with attribute (preloader-text=”S”) and add Alphabets one by once as you want to load. like “SoftDev” “Loading…” that you want to show on the loading screen. You just need to write your brand name or company name with an alphabet inside span tag and add a class with name characters, now all done. see below the HTML code

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <!-- Preloader -->
    <div id="preloader">
    <div id="container" class="container-preloader">
    <div class="animation-preloader">
    <div class="spinner"></div>
    <div class="txt-loading">
    <span preloader-text="S" class="characters">S</span>                        
    <span preloader-text="O" class="characters">O</span>
    <span preloader-text="F" class="characters">F</span>
    <span preloader-text="T" class="characters">T</span>
    <span preloader-text="D" class="characters">D</span>
    <span preloader-text="E" class="characters">E</span>
    <span preloader-text="V" class="characters">V</span>
    </div></div>    
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    </div></div>    
<h1 class="text">We're Now <span class="open">OPEN</span></h1>

You can also add any other element (like your site logo) inside the “preloader” div that you want to display on the loading screen. Similarly, if you want to show only the animated loader icon, you can remove the complete div with the class name “text-loading”.

CSS Styles

After creating HTML structure for the preloader, now it’s time to style it using CSS. For this purpose, target the “#preloader” element and make it a full-width element by defining the width and height property as 100%.Likewise, define 2 value for the z-index and set a background color according to your needs.In my previous post Create a Calendar in HTML and CSS, someone write to add comments. I have added comments for easy to learn.

CSS Code

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: #ddd; height:100%;overflow-x: hidden;}  
.text{color:brown;font-size:220px;text-align:center;}
.open{color:green;background:#000;padding:10px;border-radius:20px;}
/* Preloader */
.container-preloader {
    align-items:center; cursor:none; display:flex; height:100%;
  justify-content:center; position:fixed; left:0; top:0; width:100%; z-index:900;
}
.container-preloader .animation-preloader {
    position:absolute; z-index: 100;}
/* Spinner Loading */
.container-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
    border-radius: 50%;  border: 10px solid rgba(0, 0, 0, 0.2);
  border-top-color: green; /* It is not in alphabetical order so that you do not overwrite it */
  height: 9em;  margin: 0 auto 3.5em auto; width: 9em;
}
/* Loading text */
.container-preloader .animation-preloader .txt-loading {
  font: bold 5em 'Montserrat', sans-serif;
    text-align: center; user-select: none;
}
.container-preloader .animation-preloader .txt-loading .characters:before {
  animation: characters 4s infinite;  color: orange;
  content: attr(preloader-text);  left: 0;
  opacity: 0;  position: absolute;  top: 0;
  transform: rotateY(-90deg);
}
.container-preloader .animation-preloader .txt-loading .characters {
    color: rgba(0, 0, 0, 0.2);  position: relative;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before {
  animation-delay: 0.2s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {
  animation-delay: 0.4s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {
  animation-delay: 0.6s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {
  animation-delay: 0.8s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {
  animation-delay: 1s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(7):before {
  animation-delay: 1.2s;
}
.container-preloader .loader-section {
  background-color: #ffffff;  height: 100%;
  position: fixed;  top: 0;  width: calc(50% + 1px);
}
.container-preloader .loader-section.section-left {
  left: 0;
}
.container-preloader .loader-section.section-right {
  right: 0;
}
/* Fade effect on loading animation */
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
/* Curtain effect */
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
/* Animation of the preloader */
@keyframes spinner {
to {
    transform: rotateZ(360deg);
}}
/* Animation of letters loading from the preloader */
@keyframes characters {
  0%,
  75%,
  100% {
 opacity: 0;
 transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }}
/* Laptop size back (laptop, tablet, cell phone) */
@media screen and (max-width: 767px) {
    /* Preloader */
    /* Spinner Loading */   
    .container-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
    }
    /* Text Loading */
    .container-preloader .animation-preloader .txt-loading {
      font: bold 3.5em 'Montserrat', sans-serif;
    }}
@media screen and (max-width: 500px) {
    /* Prelaoder */
    /* Spinner Loading */
    .container-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
    }
    /*Loading text */
    .container-preloader .animation-preloader .txt-loading {
      font: bold 2em 'Montserrat', sans-serif;
    }}
</style>

At last, include the jQuery (JavaScript library) and preloader function to fade away loader after window load. You can set the custom duration (in milliseconds) for the delay and fade-out animation.

<script>
$(document).ready(function() {
  setTimeout(function() {
    $('#container').addClass('loaded');
    // Once the container has finished, the scroll appears
    if ($('#container').hasClass('loaded')) {
      // It is so that once the container is gone, the entire preloader section is deleted
      $('#preloader').delay(9000).queue(function() {
        $(this).remove();
      });}
  }, 3000);});
</script>

Want to read in detail from our official website How to Add Preloader in HTML Page.

To SEE DEMO
That’s all! Hopefully, you have successfully implemented this preloader into your HTML web page. If you have any questions or suggestions let me know by discuss below.