CODEWITHSUNDEEP
javascripthtmlloadinggif
Snappysites
Snappysites

Reputation: 843

How to modify this HTML JS page loading script to fade out white background as well as icon

I have implemented this loading icon which works well and appears central on the page, which is good. I have added an additional script to fade out the icon rather than it just changing abruptly, this works well but the white background change is still very abrupt.

I'm wondering how I would change the following script to allow for the white background to fade out to the page content as well as the icon.

<style>
#loader { 
            
            width: 70px; 
            height: 70px; 
        } 
          
        .center { 
            background: #fff;
            position:fixed;
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            margin: auto; 
        } 
</style>

<div id="loader" class="center"> <i class="fa fa-spinner fa-5x fa-spin" style="color:#118F5E"></i></div>

<script> 
        document.onreadystatechange = function() { 
            if (document.readyState !== "complete") { 
                document.querySelector( 
                  "body").style.visibility = "hidden"; 
                $('#loader').animate({opacity: 0}, 1000);
                document.querySelector( 
                  "#loader").style.visibility = "visible";
                
            } else { 
                document.querySelector( 
                  "#loader").style.display = "none"; 
                document.querySelector( 
                  "body").style.visibility = "visible"; 
            } 
        }; 
    </script>

Upvotes: 0

Views: 127

Answers (1)

UnfocusedDrive
UnfocusedDrive

Reputation: 191

You could extend what you have a bit and put the loader inside an overlay container.

html

<div id="page-overlay" class="center">
  <div id="loader" class="center"> <i class="fa fa-spinner fa-5x fa-spin" style="color:#118F5E"></i></div>
</div>

css

#loader { 
  width: 70px; 
  height: 70px; 
} 

.center { 
  background: #fff;
  position:fixed;
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  margin: auto; 
}

js

document.onreadystatechange = function() { 
  if (document.readyState !== "complete") { 
    document.querySelector( 
      "body").style.visibility = "hidden"; 
    $('#page-overlay').animate({opacity: 0}, 1000);
    
    document.querySelector( 
      "#loader").style.visibility = "visible";
  } else { 
   document.querySelector( 
      "#loader").style.display = "none";
    document.querySelector( 
      "body").style.visibility = "visible"; 
  } 
};

So basically 1) insert #loader into #page-overlay in HTML 2) apply the animate instead to$('#page-overlay') in the JS. Here is a fiddle concept: https://jsfiddle.net/kyb4mezh/

This will make the page effectively transition in. You could even go further and add a fixed opacity to the loader container too.

Upvotes: 1

Related Questions