How to set magento 2 project loading image on while page loader.

We have provided very easy step and simple code for your Magento 2 project while page loading.

Step 1. Open your "copyright.phtml" and add this <div class="loader"></div> after </small> tag.
    (Please add this "copyright.phtml" file in this path : Magento_Theme\templates\html)

Step 2. Add this following code.

 <script type="text/javascript">  
      require([  
      'jquery'  
      ], function ($) {  
           $(window).scroll(function(){  
                if ($(window).scrollTop() >= 150) {  
                  $('.page-wrapper').addClass('fixed-header');  
                }  
                else {  
                  $('.page-wrapper').removeClass('fixed-header');  
                }  
           });  
      });  
 </script>  

Step 3. Add this following CSS in your stylesheet.(please create loader image like gif,svg)

 .loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999999;background:url(../images/pageLoader.svg) 50% 50% no-repeat #000}  

Step 4. Please clean cache: php bin/magento cache:clean

Now refresh your page and show result.

Note : if this example not works please add this jquery :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>