How to show Page Loading div icon until the page has finished loading?

Show spinner image while the page is loading – javascript

In the fast-paced world of web development, user experience is paramount. It’s crucial to keep your visitors engaged and informed, especially when your website takes a little extra time to load. One way to enhance the user experience is by displaying a loading or spinner div icon until the page has fully loaded. In this article, we’ll explore how to achieve this effect using pure vanilla JavaScript and the document.readyState property. Whenever the value of this property undergoes a change, it triggers a readystatechange event on the document object.

Implementing the Page Loading Div with document.readyState

Let’s go through the steps to create a loading div that appears until the page has finished loading using pure JavaScript and the document.readyState property:

Why Use document.readyState?

The document.readyState property is a valuable tool in JavaScript that allows us to monitor the loading status of a web page. It has different values at various stages of the page-loading process, making it perfect for showing a loading div icon until the page is ready for interaction. This approach is efficient because it doesn’t rely on additional libraries or external dependencies.

HTML Structure:

Begin by setting up the basic HTML structure of your page. Place a div element for the loading icon or message directly after the opening <body> tag in your HTML file:

<html lang="en">
<head>
    <!-- Your head content here -->
</head>

<body>

	<div id="maindivblock">
	<div id="loader" class="center"></div>

	<!-- Your page content here -->

	</div>

	<script src="your-script.js"></script>

</body>
</html>

CSS Styling:

Style the loading div to match your website’s design. You can center it on the screen, set a background color, and apply CSS animations to make it visually appealing. Here’s a basic example:

<style>
	#loader {
		border: 12px solid #f3f3f3;
		border-radius: 50%;
		border-top: 12px solid #444444;
		width: 70px;
		height: 70px;
		animation: spin 1s linear infinite;
	}

	.center {
		position: absolute;
		top: 0;
		bottom: 0; // comment this line if not required.
		left: 0;
		right: 0;
		margin: auto;
	}

	@keyframes spin {
		100% {
			transform: rotate(360deg);
		}
	}
</style>

JavaScript Logic:

Now, let’s add the JavaScript logic to show the loading div until the page has finished loading. Create a JavaScript file (e.g., your-script.js) and add the following code:

Use the onreadystatechange event to show the loading indicator while loading the page

your-script.js


document.onreadystatechange = function () {
	if (document.readyState !== "complete") {
		//document.querySelector("body").style.visibility = "hidden";
		document.getElementById("maindivblock").style.display = "none";
		document.querySelector("#loader").style.visibility = "visible";
	} else {
		document.querySelector("#loader").style.display = "none";
		document.getElementById("maindivblock").style.display = "block";
		//document.querySelector("body").style.visibility = "visible";
	}
};

Note:

In this example, loader is implemented within <div> tag but if you want to apply loader/spinner for the whole <body> (page) section then uncomment querySelector(“body”) line and comment maindivblock line.

In this JavaScript code, we first listen for the “DOMContentLoaded” event, which triggers when the DOM content is fully loaded. At this point, we display the loading div.

Next, we use the document.onreadystatechange event to continuously check the value of document.readyState. When document.readyState becomes “complete“, it means the entire page has finished loading, and we hide the loading div.

Screenshot:

Conclusion

Displaying a page-loading div icon or message until the page has fully loaded is an excellent way to enhance the user experience on your website. By using pure JavaScript and the document.readyState property, you can ensure that users receive visual feedback and remain engaged while your page loads. Customize the loading div’s style to match your site’s design, creating a positive first impression for your visitors.

Latest: