تحميل كافة عناصر مدونتي

 #loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjreuhp-ejX2uybsy7T2UJecmpfh1slUXTv3M6eG71OQ8QTQ2pFnYr0w0Vf0xbFYNnGviuBjhJtR0H_w98L9ItDkpOqhz_HOV-ds_BhwG7-Ag7QHirPxHMGPvAAHvAoTLc0XQlpC5xYU/s1600/ajax-loader.gif) no-repeat center;
line-h eight: 350px; 
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.wwy #loading {
display: none;
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
background: #eee;
opacity: 0.8;
width: 0;
height: 18px;
} 

 <script type='text/javascript'>
(function($){$("html").removeClass("wwy");
 $("#header").ready(function(){ $("#progress-bar").stop()
  .animate({ width: "25%" },1500) });
 $("#footer").ready(function(){ $("#progress-bar").stop()
  .animate({ width: "75%" },1500) });
 $(window).load(function(){ $("#progress-bar").stop()
  .animate({ width: "100%" },600,function(){ $("#loading")
   .fadeOut("fast",function(){ $(this)
 .remove(); }); });});})(jQuery);
</script>  

 <div id='loading'>
   <div id='progress-bar'/>
  </div> 

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <div id='loading'>
   <div id='progress-bar'/>
  </div>
</b:if>