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. Besides this, you can also download the complete source code of this preloader project.
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.
Before getting started with coding, I would like you to suggest to browse the demo page check preloader working. 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 overlay 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 a class name "overlay". Likewise, create a div element with a class name "preloader" and place a child div inside it, and define its class name "loader". Inside the loader, build a span element with a class name "loader-inner". In the end, create a p tag and place your text (like “Loading…” or “Please wait…” ) that you want to show on the loading screen.
<div id="overlayer"></div>
<div class="preloader">
<div class="loader">
<span class="loader-inner"></span>
</div>
<p> Loading...</p>
</div>
You can also add any other element (like your site logo) inside the “preloader” tag that you want to display on the loading screen. Similarly, if you want to show only the animated loader icon, you can remove the p tag.
CSS Styles for Preloader
After creating HTML structure for the preloader, now it’s time to style it using CSS. For this purpose, target the "#overlay" element and make it a full-width element by defining the width and height property as 100%. Keep its position fixed to pull out from its parent element and set 0 value for the top, left, right, bottom to fit on the full screen. Likewise, define 2 value for the z-index and set a background color according to your needs.
#overlayer {
width:100%;
height:100%;
position:fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background:#4a4a4a;
}
Now, define the basic styles for the preloader loading text. We need to centralize this text container. To do so, specify its fixed dimension by defining 120px width and 90px height. Keep its position as absolute and align the text to the center. Similarly, specify the top and left value as 80% and 50% respectively. The other properties like color, font-size, etc. can be defined according to your requirements.
.preloader p{
position: absolute;
top: 80%;
left: 50%;
margin-left: -45px;
width: 120px;
height: 90px;
text-align: center;
color: #fff;
font-size: 24px;
z-index: 3;
}
If you want to apply animation on your loading text, check these CSS text animations.
Animated Page Preloader Icon Styles
The "loader" class is the outer/container of the loader icon. Display it as an inline-block element, specify its width & height as 30px, and keep its absolute position. Set the 4px thick border and specify the top value as 50% in order to keep this element in the mid of the screen.
Here, the important property for this class is animation. Define an infinite animation "loader" with a 2s animation duration. If you want to customize this loading icon, you can set a custom color for the border. Furthermore, you can make it circular by defining border-radius property with the value "50%".
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
z-index:3;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
Inner of the loader is a span element that we are going to make it as a filled object for the loader icon. So, display it as inline-block, define 100% width, and specify the “top” value for the vertical-align property. Likewise, define "loader-inner" animation with a 2s ease-in duration. You can specify any HTML color value for the background-color property that you want to show inside the loader.
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
CSS Keyframes for Loader Animation
There are two animations that we used inside the loader. The first one is about to rotate the element with the following keyframes.
@keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
The second animation increase/decrease the height of the span element to make the fill/refill illusion. Finally, add the following keyframes into your project and done.
@keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
@-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
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.
<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(window).load(function() {
$(".preloader").delay(5000).fadeOut("slow");
$("#overlayer").delay(5000).fadeOut("slow");
})
</script>
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 comment below.
The loading box is being displayed at the left side
Ya the issue is the same with me too