Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Add preloader in HTML Page. A preloader is one of the primary elements of the user-friendly interface. It shows that contents/text still load with an animated loader or text. This tutorial teaches you how to create a preloader on the HTML page.
It is a full-screen loading animation that covers the whole page until the page is fully loaded. The overlay and loader icon were built with CSS (no image) and jQuery used for the preloader function.
Well! Let’s get started with an HTML structure to build a loading screen.
How to Add Preloader in HTML Page?
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 keyframes mentioned above. Also, it is responsive for mobile devices.
At last, include the jQuery (JavaScript library) and preloader function to fade away the loader after the 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.
Comments