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.
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
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!
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!
Amazing! Its truly awesome post, I have got much clear
idea concerning from this article.
Excellent way of telling, and pleasant post to get facts about my presentation focus, which i am going
to convey in school.
After the preloader how would I link it to the index of my website
You can add provided code in the main index file.
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.
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!
Wow! At last I got a blog from where I be able to genuinely get valuable information concerning my study and knowledge.
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
I really like it when folks get together and share views.
Great blog, continue the good work!
Hello it’s me, I am also visiting this site daily, this web site is actually nice and the users are in fact sharing good thoughts.
I am truly grateful to the owner of this site who has shared this enormous paragraph at here.
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.
Wow! After all I got a webpage from where I can in fact obtain valuable information regarding my study and knowledge.
Hi colleagues, pleasant piece of writing and good arguments commented here, I am genuinely enjoying by these.
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!
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.
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!
Wow, that’s what I was exploring for, what a material!
existing here at this blog, thanks admin of this web page.
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.