Loading Graphic Example

loading-graphic-example.php

<div class="loading-example-container" style="display: block; float: left;width: 100%;padding: 50px;text-align: center;font-size: 40px;line-height: 40px;">
Page Loading...<br><i class="fa fa-spinner fa-pulse"></i>
</div>

<div class="loading-example-content" style="display: none;">
<img src="https://whiteleydesigns.com/wp-content/uploads/2016/05/nature1.jpg" alt="Nature Image 1" width="1675" height="950" class="alignnone size-full wp-image-859" />
<img src="https://whiteleydesigns.com/wp-content/uploads/2016/05/nature2.jpg" alt="Nature Image 2" width="1675" height="950" class="alignnone size-full wp-image-860" />
<img src="https://whiteleydesigns.com/wp-content/uploads/2016/05/nature3.jpg" alt="Nature 3" width="1080" height="1440" class="alignnone size-full wp-image-862" />
<img src="https://whiteleydesigns.com/wp-content/uploads/2016/05/nature4.jpg" alt="Nature 4" width="1080" height="715" class="alignnone size-full wp-image-865" />
<img src="https://whiteleydesigns.com/wp-content/uploads/2016/05/nature5.jpg" alt="Nature 5" width="1080" height="721" class="alignnone size-full wp-image-866" />
</div>

<script>
jQuery(window).load(function() {
  jQuery('.loading-example-container').fadeOut(1500);
  jQuery('.loading-example-content').delay(1500).fadeIn(1500);
});
</script>