close
Page loader is an effective element on the web page that display and is visible to the user while the page is loading. When a web page is taking a long time to load, the loader animation creates a visual representation to help users to understand that the page is loading and will be available soon. Without a pre-loader, the user will see a blank white page while the page is in a loading state.
In this tutorial, we will show you how to create loader animation (with an image or text content) and display loader DIV until the web page has finished loading on the browser. You can make pre-loader elements easily using HTML and CSS. To handle the loader visibility you can use JavaScript.
The following example code snippet creates a page loader and display loader on the web page until the page has finished loading using HTML, CSS, and jQuery.
Create Loader element with HTML:
<div class="page-loader">
<div class="spinner"></div>
<div class="txt">Loading...</div>
</div>
Hide loader when the page has been loaded using jQuery:
Include jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
Create a custom JavaScript function to hide the loader element.
<script>
function hideLoader(){
$('.page-loader').fadeOut('slow');
}
</script>
Pass the hideLoader() function in onload event and place it in the
<body onload="hideLoader()">
Add style to pre-loader element with CSS:
/* Pre-loader CSS */
.page-loader{
width: 100%;
height: 100vh;
position: absolute;
background: #272727;
z-index: 1000;
.txt{
color: #666;
text-align: center;
top: 40%;
position: relative;
text-transform: uppercase;
letter-spacing: 0.3rem;
font-weight: bold;
line-height: 1.5;
}
}
/* Spinner animation */
.spinner {
position: relative;
top: 35%;
width: 80px;
height: 80px;
margin: 0 auto;
background-color: #fff;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
This is a fantastic tutorial on creating a loader using HTML, CSS, and JS! A loader is an essential feature for any website to provide a better user experience by indicating to the user that the page is still loading.
The step-by-step instructions provided in this tutorial are clear and easy to follow, even for beginners. The use of CSS animations to create the loader adds a visually appealing touch to the page, while the JS code ensures that the loader disappears once the page has finished loading.
I appreciate that the tutorial includes both the HTML and CSS code, as well as the JS code, making it easy to follow along and understand each step. The use of comments in the code is also helpful for explaining the purpose of each section.