There are a lot of ways in which we can show a loading
document.readyState property. When the value of this property changes, a
readystatechange event fires on the document object.
document.readyState property can return these three string values:
loading: when the document is still loading.
interactive: when the document has finished loading but sub-resources such as stylesheets, images and frames are still loading.
complete: when the document and all sub-resources have finished loading.
readystatechange event fires and our function executes. If the document is not yet loaded then the body should remain hidden from the user, only the loader should be visible. Once the page has completely loaded we set loader’s display to none and we make the body visible.
To see the code in action, you need to follow these simple steps:
Step 1: Copy and paste the example code from above in a text editor and save it with .html extension.
Step 2: Open the .html file you saved then open your browser’s developer tool, go to the networks tab and set throttling to Slow 3G. Here’s a GIF to show you how to do it:
Step 3: Reload the page using ctrl + f5. Here’s how the final output looks like:
- How to Show and Hide div elements using radio buttons?
- How to Show and Hide div elements using Checkboxes ?
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- Node.js | stream.finished() Method
- How to load jQuery code after loading the page?
- How to display search result of another page on same page using ajax in JSP?
- How to redirect a page to another page in HTML ?
- How to pass form variables from one page to other page in PHP ?
- AngularJS | ng-show Directive
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- Hide or show elements in HTML using display property
- jQuery | Effect show() Method
- How to display icon next to show/hide text on button?
- p5.js | show() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.