How to Display a Loader/Loading Image while Page Loads

Submitted by nurhodelta_17 on Friday, April 13, 2018 - 21:51.

Getting Started

First, we need the jQuery library. I've included the file in the downloadable of this tutorial, but if you want, you can get jQuery using this link. The example loader/loading image that I've used in this tutorial is also included in the downloadable. Note: I'm using jQuery 3.3.1 in this tutorial.

Creating our Page

Finally, we create the page where we place our loader. I've set up the jQuery code that the loader will still be there after 5 secs but you can remove this. Create a new file, name it as index.html and paste the codes below.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>How to Display a Loader/Loading Image while Page Loads</title>
        <style type="text/css">
                #loader{
                    position: fixed;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: 9999;
                    background: url('img/loader.gif') 50% 50% no-repeat rgb(249,249,249);
                    opacity: 1;
                }
        </style>
</head>
<body>
<div id="loader"></div>
<p>If you can see this text it means that the page loads successfully</p>
 
<script src="jquery.min.js"></script>
<script type="text/javascript">
        $(window).on('load', function(){
                //you remove this timeout
                setTimeout(function(){
                $('#loader').fadeOut('slow');  
            }, 5000);
            //remove the timeout
            //$('#loader').fadeOut('slow'); 
        });
</script>
</body>
</html>

How to Display a Loader/Loading Image while Page Loads

Getting Started

Creating our Page

Comments

Page loader

Add new comment