Learning how to Create a Pro Preloader in HTML can seriously enhance user experience & display a loading animation before your main website content fully loads. This feature is especially useful for websites with big content, as it comforts users that the site is loading and reduces the chance of them leaving due to loading delays.
In this guide, we’ll learn how to create a custom and professional-looking preloader using HTML, CSS, and JavaScript. This preloader will display a spinning animation along with animated text, smoothly transitioning into your website’s main content.
Create a Pro Preloader in HTML
Step 1: Setting Up the HTML Structure
First, create the HTML structure for your preloader. This includes a spinner, animated text, and a wrapper to contain these elements.
HTML Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Preloader HTML -->
<div id="preloader">
<div id="container" class="container-preloader">
<div class="animation-preloader">
<div class="spinner"></div>
<div class="txt-loading">
<span preloader-text="P" class="characters">P</span>
<span preloader-text="R" class="characters">R</span>
<span preloader-text="O" class="characters">O</span>
<span preloader-text="L" class="characters">L</span>
<span preloader-text="O" class="characters">O</span>
<span preloader-text="A" class="characters">A</span>
<span preloader-text="D" class="characters">D</span>
<span preloader-text="E" class="characters">E</span>
<span preloader-text="R" class="characters">R</span>
</div>
</div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
</div>
<a class="origin" href="https://softcodeon.com/tutorials/how-to-add-preloader-in-html-page.htm">How to Add Preloader in HTML Page</a>
<h1 class="text">We're Now <span class="open">OPEN</span></h1>
Step 2: Styling the Preloader with CSS
Use CSS to control the preloader’s layout, spinner animation, and loading text appearance.
CSS Code:
* {
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 Styling */
.container-preloader {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 900;
cursor: none;
}
.animation-preloader {
position: absolute;
z-index: 100;
}
.spinner {
animation: spinner 1s infinite linear;
border-radius: 50%;
border: 10px solid rgba(0, 0, 0, 0.2);
border-top-color: green;
height: 9em;
width: 9em;
margin: 0 auto 3.5em auto;
}
.txt-loading {
font: bold 5em 'Montserrat', sans-serif;
text-align: center;
user-select: none;
}
.characters:before {
animation: characters 4s infinite;
color: orange;
content: attr(preloader-text);
position: absolute;
opacity: 0;
transform: rotateY(-90deg);
}
.characters {
color: rgba(0, 0, 0, 0.2);
position: relative;
}
.characters:nth-child(2):before { animation-delay: 0.2s; }
.characters:nth-child(3):before { animation-delay: 0.4s; }
.characters:nth-child(4):before { animation-delay: 0.6s; }
.characters:nth-child(5):before { animation-delay: 0.8s; }
.characters:nth-child(6):before { animation-delay: 1s; }
.characters:nth-child(7):before { animation-delay: 1.2s; }
.loader-section {
background-color: #ffffff;
height: 100%;
position: fixed;
top: 0;
width: calc(50% + 1px);
}
.section-left { left: 0; }
.section-right { right: 0; }
.loaded .animation-preloader { opacity: 0; transition: 0.3s ease-out; }
.loaded .section-left { transform: translateX(-101%); transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000); }
.loaded .section-right { transform: translateX(101%); transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000); }
/* Keyframes for Animation */
@keyframes spinner { to { transform: rotateZ(360deg); }}
@keyframes characters {
0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); }
25%, 50% { opacity: 1; transform: rotateY(0deg); }
}
/* Responsive Design */
@media screen and (max-width: 767px) {
.spinner { height: 8em; width: 8em; }
.txt-loading { font: bold 3.5em 'Montserrat', sans-serif; }
}
@media screen and (max-width: 500px) {
.spinner { height: 7em; width: 7em; }
.txt-loading { font: bold 2em 'Montserrat', sans-serif; }
}
.origin { text-decoration: none; font-size: 45px; }
Step 3: JavaScript for Preloader Timing Control
The following JavaScript will manage the timing and display of the preloader.
Javascript:
javascriptCopy code$(document).ready(function() {
setTimeout(function() {
$('#container').addClass('loaded');
// Once the container is fully loaded, display the scroll and remove the preloader
if ($('#container').hasClass('loaded')) {
$('#preloader').delay(9000).queue(function() {
$(this).remove();
});
}
}, 3000); // Adjust timing as needed
});
Read More: 10 High Paying Digital Marketing Methods You Can Start Today
Code Explanation
- HTML Structure: The HTML structure includes each letter of “PROLOADER” animated in sequence to provide a smooth loading effect.
- CSS Animations:
.spinnerrotates to create a spinning animation.@keyframesanimations control both the spinning and the sequential appearance of each letter.
- JavaScript: Adds a
loadedclass to the preloader container after a 3-second delay, making the preloader disappear smoothly.
Conclusion
A professional preloader can enhance the user experience and provide visual feedback while your site loads. This custom preloader can be easily customized to fit your website’s branding and design (We added comments to change as you required), from the timing and text to the colors and animations. Implement it on your site and make your first impression a lasting one!
