Loader before loading an HTML file through JavaScript

How to display a loading bar before the entire page is loaded through JavaScript?

Last updated:7/19/2021 5:25:39 AM

1 Answers

Ethan Karla
Ethan Karla

Loading bar can be achieve with the help of window load event. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

Let's understand it with the help of an example :

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Asynchronous JavaScript </title>
    <script>
        window.onload = function () {
            // PAGE IS FULLY LOADED
            // FADE OUT YOUR OVERLAYING DIV
            var fadeTarget = document.getElementById('overlay');
            fadeTarget.style.opacity = 0.1;
        };
    </script>
</head>
<body align='center'>
    <div id='overlay'>
    <img src='loading.gif' alt='Loading' />
    Loading...
</div>
</body>
</html>

Hope this information has cleared your confusion.

Happy Coding!

Answer