How to Add Preloader in HTML Page

Add Preloader in HTML Page. A preloader is one of the primary elements of the user-friendly interface. It shows that contents/text are still loading with an animated loader or text. In this tutorial, you will learn 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 is fully loaded. The overlay and loader icon was built with CSS (no image) and jQuery used for the 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 loading 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.

Read Also: Create Custom Scroll Bar Using CSS

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.

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>

In the last step, we have added an H1 tag for dummy text inside the page. You have to add your own data to the page.

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 for Preloader

After creating an HTML structure for the preloader, now it’s time to style it using CSS. For this design, target the "#preloader" element and make it a full width and height property as 100%. Likewise, define 2 values for the z-index and set a background color according to your needs. You can change the background color from the body tag in CSS.

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

There are two animations that we used inside the loader. The first one is about to rotate the element with the above-mentioned keyframes. Also, it is responsive for mobile devices.

At last, include the jQuery (JavaScript library) and preloader function to fade away loader after window load. It’s not a difficult task, but it takes practice. If you have a lot of homework, you can contact papertyper.net and get help with it. 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>

That’s all! Hopefully, you have successfully implemented this preloader into your HTML web page.

Share your Love

22 Comments

  1. I feel this is among the most vital info for me.
    And i’m glad reading your article. However want to remark on some common things,
    The web site style is ideal, the articles is truly excellent :
    D. Just right process, cheers

  2. Please let me know if you’re looking for a article writer for your blog.
    You have some really great articles and I feel I would be a good
    asset. If you ever want to take some of the load off, I’d love to write some material for your blog in exchange for
    a link back to mine. Please blast me an e-mail if interested.
    Thanks!

  3. Hey there! I’ve been following your web site for some time now and finally got the bravery to go ahead and
    give you a shout out from Porter Tx! Just wanted to tell you keep up the good work!

  4. Good day I am so grateful I found your webpage, I really
    found you by accident, while I was researching on Askjeeve for something else,
    Nonetheless I am here now and would just like to say
    cheers for a marvelous post and a all round interesting blog (I also love
    the theme/design), I don’t have time to read it all at the
    moment but I have bookmarked it and also included your RSS feeds, so when I have time I will be back to
    read more, Please do keep up the great jo.

  5. fantastic submit, very informative. I’m wondering why the other specialists of
    this sector do not realize this. You must continue your writing.

    I am sure, you’ve a great readers’ base already!

  6. I just could not leave your site prior to suggesting that I really
    enjoyed the standard information a person supply to your visitors?
    Is going to be back continuously to check out new posts

  7. What’s Taking place i am new to this, I stumbled
    upon this I have discovered It positively helpful and it has aided me
    out loads. I hope to contribute & aid other customers like its helped me.

    Good job.

  8. Somebody essentially help to make critically posts I’d
    state. That is the very first time I frequented your
    website page and so far? I surprised with the
    research you made to create this actual put up extraordinary.
    Magnificent process!

  9. I all the time used to study paragraph in news papers but now
    as I am a user of internet thus from now I am using net for articles, thanks to web.

  10. I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else
    know such detailed about my trouble. You’re
    incredible! Thanks!

  11. Can I simply just say what a relief to uncover a person that genuinely understands what they are discussing on the net.

    You definitely understand how to bring a problem to light and make
    it important. More and more people must check this out
    and understand this side of your story. I was
    surprised that you are not more popular since you certainly possess the gift.

Leave a Reply