How can I show the page loading div until the page is loaded?

Instead of showing an entire white or black screen while the page is loading, a loading indicator is displayed, which also improves the user experience of the application.

Now, there are some libraries that can display loading indicators. However, we can create a custom loading indicator div using HTML and CSS.

In this tutorial we will use HTML, CSS and JavaScript to display the page loading div until the page is loaded

Use onreadystatechange event to display loading indicator when loading page

In JavaScript, whenever the status of the web page changes, the onreadystatechange event will be triggered. The first state is "interactive", which means the web page is interacting and has started loading. The second stage is "Complete", that is, the web page is loaded successfully.

So we can hide the body and show the loading indicator in all other states, and in the "Complete" state we can hide the loading indicator and show the body.

grammar

Users can show and hide the loading indicator based on the status of the document by following the following syntax.

document.onreadystatechange = function () { if (document.readyState !== "complete") { // show loading indicator and hide body } else { // show body, and hide loading indicator } };

In the above syntax, we will call this function whenever the status of the document changes. It checks if the status is "Complete", then hides the loading indicator and displays the body.

Example

In the example below, we created a div using the "loading_indicator" div and applied some CSS to make it a circular loading indicator.

In JavaScript, we use the onreadystatechange event. This function is executed whenever the state changes. Within the function, we use the document's "readyState" property to get the current state of the document. If the document's current status equals "Complete" we can access and hide the loading indicator and display the entire document body. Otherwise, we can show the loading indicator and hide the document body.

   
  
Using the  onreadystatechange event  to show page loading div in JavaScript.
 
 
 
 Page Loaded successfully.
    

Example

In the example below, we use jQuery to display a loading indicator when the page is loading. We added HTML and CSS to the document body.

In JQuery, we use the append() method to append the loading indicator to the document body. After that we use the "load" event to check if the page has loaded and based on that we remove the loading indicator from the web page.

    
  
Using the  JQuery load event  to show page loading div in JavaScript.
 
Page Loaded successfully.
    

We learned to use JavaScript and jQuery to display a loading indicator when the page loads. In the first example, we use JavaScript's onreadystatechange event to show and hide the loading indicator based on whether the page is loaded.

In the second example, we use JQuery's load event to show and hide the loading indicator

The above is the detailed content of How can I show the page loading div until the page is loaded?. For more information, please follow other related articles on the PHP Chinese website!