Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to show Page Loading div until the page has finished loading?
Rather than showing the whole white or black screen while loading the page, it is better to show the loading indicator, which also improves the UX of the application.
Nowadays, there are some libraries available to show loading indicators. However, we can use HTML and CSS 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 while loading the page
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 stage is ‘complete’, which means the web page is loaded successfully.
So, we can hide the body 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
In the example below, we have created the div with the ‘loading_indicator’ div and applied some CSS to make it a rounded loading indicator.
In JavaScript, we use the onreadystatechange event. Whenever the state changes, it will execute the function. In the function, we use the ‘readyState’ property of the document to get the current state of the document. If the document's current state is equal to the ‘complete’, we can access and hide the loading indicator and show the whole document body. Otherwise, we can show a loading indicator and hide the document body.
<html>
<head>
<style>
#loading_indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid grey;
border-radius: 50%;
border-top: 10px solid blue;
width: 100px;
height: 100px;
animation: spinIndicator 1s linear infinite;
}
@keyframes spinIndicator {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>Using the <i> onreadystatechange event </i> to show page loading div in JavaScript.</h2>
<div id = "loading_indicator"> </div>
<h3> Page Loaded successfully.</h3>
<img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
<script>
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.getElementById("loading_indicator").style.visibility = "visible";
} else {
setTimeout(() => {
document.getElementById("loading_indicator").style.display ="none";
document.querySelector("body").style.visibility = "visible";
}, 3000)
}
};
</script>
</body>
</html>
Example
In the example below, we have used jQuery to show the loading indicator while loading the page. We have added HTML and CSS for the document body.
In JQuery, we used the append() method to append the loading indicator in the document body. After that, we used the ‘load’ event to check whether the page was loaded or not and based on that, we removed the loading indicator from the web page.
<html>
<head>
<style>
#indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid grey;
border-radius: 50%;
border-top: 10px solid red;
width: 100px;
height: 100px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
<script>
$('body').append('<div style = "" id = "indicator"> <div class="loader"> </div> </div>');
$(window).on('load', function () {
setTimeout(removeLoader, 2000);
});
function removeLoader() {
$("#indicator").fadeOut(1000, function () {
$("#indicator").remove();
});
}
</script>
</body>
</html>
We learned to show a loading indicator while the page is loading using JavaScript and jQuery. In the first example, we used the onreadystatechange event of JavaScript to show and hide the loading indicator based on whether the page is loaded.
In the second example, we used the load event of JQuery to show and hide the loading indicator
8K+ Views
