Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to show Page Loading div until the page has finished loading?
Rather than showing a blank white or black screen while loading the page, it is better to show a loading indicator, which improves the user experience of the application.
Nowadays, there are many libraries available to show loading indicators. However, we can use HTML, CSS, and JavaScript to create a customized loading indicator div.
In this tutorial, we will use HTML, CSS, and JavaScript to show page loading div until the page has finished loading.
Use the onreadystatechange Event to Show the Loading Indicator
In JavaScript, the onreadystatechange event triggers whenever the state of the web page changes. The first state is 'interactive', which means the web page is interacting and has started loading. The second state is 'complete', which means the web page has loaded successfully.
We can hide the body content and show the loading indicator on every other state, and on the 'complete' state, we can hide the loading indicator and show the body.
Syntax
Users can follow the syntax below to show and hide the loading indicator based on the state of the document.
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
// show loading indicator and hide body
} else {
// show body, and hide loading indicator
}
};
In the above syntax, whenever the state of the document changes, we invoke the function. It checks if the state is 'complete', then hides the loading indicator and shows the body.
Example: Using onreadystatechange Event
In the example below, we have created a div with the 'loading_indicator' id and applied CSS to make it a rounded spinning indicator. The JavaScript code uses the onreadystatechange event to toggle visibility based on the document's ready state.
<html>
<head>
<style>
#loading_indicator {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #3498db;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#content {
display: none;
}
</style>
</head>
<body>
<div id="loading_indicator">
<div class="spinner"></div>
</div>
<div id="content">
<h2>Using the <i>onreadystatechange event</i> to show page loading div in JavaScript</h2>
<h3>Page loaded successfully!</h3>
<img src="/static/images/logo-color-footer.png" alt="TutorialsPoint Logo">
<p>This content was hidden during page loading and is now visible.</p>
</div>
<script>
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.getElementById("loading_indicator").style.display = "flex";
document.getElementById("content").style.display = "none";
} else {
// Add small delay to demonstrate the loading effect
setTimeout(() => {
document.getElementById("loading_indicator").style.display = "none";
document.getElementById("content").style.display = "block";
}, 1500);
}
};
</script>
</body>
</html>
Example: Using jQuery Load Event
In this example, we use jQuery to show the loading indicator while the page loads. We append the loading indicator to the document body and use the 'load' event to remove it once loading is complete.
<html>
<head>
<style>
#loading_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader {
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #e74c3c;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i>jQuery load event</i> to show page loading div in JavaScript</h2>
<h3>Page loaded successfully!</h3>
<img src="/static/images/logo-color-footer.png" alt="TutorialsPoint Logo">
<p>This is the main content of the page.</p>
<script>
// Create and append loading overlay
$('body').append('<div id="loading_overlay"><div class="loader"></div></div>');
$(window).on('load', function () {
setTimeout(removeLoader, 2000);
});
function removeLoader() {
$("#loading_overlay").fadeOut(500, function () {
$("#loading_overlay").remove();
});
}
</script>
</body>
</html>
Key Differences Between Approaches
| Method | Trigger | Dependencies | Performance |
|---|---|---|---|
| onreadystatechange | Document ready state | Vanilla JavaScript | Faster, no external library |
| jQuery load | Window load event | jQuery library | Slower due to library overhead |
Best Practices
When implementing loading indicators:
- Use
position: fixedwith highz-indexfor full-screen coverage - Provide visual feedback with CSS animations
- Keep loading times reasonable (1-3 seconds maximum)
- Test on slower connections to ensure good user experience
Conclusion
We learned to show a loading indicator while the page loads using both vanilla JavaScript and jQuery. The onreadystatechange approach is lighter and faster, while jQuery provides smoother animations and easier DOM manipulation.
12K+ Views
